CSS 속성 - display **flex**

너무 중요한 부분 중 하나이지만 이해가 안되었던 관계로 다시 집중적으로 파고 들어보자.

<style>

.container {

background-color: beige;

height: 100vh;

}

.item {

width: 40px;

height: 40px;

}

.item1 {

background-color: red;

}

.item2 {

background-color: orange;

}

.item3 {

background-color: yellow;

}

.item4 {

background-color: green;

}

.item5 {

background-color: blue;

}

.item6 {

background-color: navy;

}

.item7 {

background-color: purple;

}

</style>

<div class="container">

<div class="item item1"></div>

<div class="item item2"></div>

<div class="item item3"></div>

<div class="item item4"></div>

<div class="item item5"></div>

<div class="item item6"></div>

<div class="item item7"></div>

</div>

<이해를 위한 기본 세팅>

이렇게 코드를 작성하였을 때 container와 item에 적용할 수 있는 속성값들이 나눠져 있다.

 

container에 적용 가능한 속성값

• display 
• flex-direction
• flex-wrap
• flex-flow
• justify-content
• align-items
• align-content

item에 적용 가능한 속성값

• order(잘 안 쓰긴 함)
• flex-grow
• flex-shrink
• flex
• align-self

 

 

먼저 container에 적용 가능한 속성값부터 알아보자.

 

 

1.display

    - flex : 블록요소들이 메인축(flex-direction을 하면서 부가 설명이 나올 것)에 따라 내용물의 width만큼만 차지하고 한 줄로 표시된다.(반응형이라 브라우저의 크기에 따라 크기가 변한다.)

이렀던 요소들이 

이렇게 변하는 모습

 

    - inline-flex : 위 flex와 비슷한데 이건 브라우저의 크기에 따라 크기가 변하지 않는다.

 

2. flex-direction

    - row : 기본값(왼쪽에서부터 정렬 )

    - row-reverse : 오른쪽에서부터 정렬    

    -> 위 두 가지의 중심축은 수평축이다.

    - colum : 위에서 아래로

    - colum-reverse : 아래에서 위로

    -> colum은 중심축이 수직축이 된다.

 

3. flex-wrap

    - nowrap : 기본값(한 줄에 정렬)

    - wrap : 브라우저의 크기에 따라 여러 줄로 바뀐다.

    - 위 두가지가 적응이 되면 flex-flow로 두 가지를 한 번에 적용할 수 있다.

 

이제 아이템들을 어떻게 배치할건지

4. justify-content : 메인축 방향 정렬

    - flex-start : 기본값(처음부터 정렬)

    - flex-end : 반대편에 붙여서 정렬(flex-direction에서 row-recerse와 달리 이건 축의 반대편에 붙어 배치할 뿐 배열의 순서가 달라지진 않는다.)

    - space-around : item 들의 둘레(around)에 균일한 간격을 둔다.

출처 :&nbsp;https://studiomeal.com/archives/197

    - space-between : item 들의 사이에 균일한 간격을 둔다.

출처 :&nbsp;https://studiomeal.com/archives/197

    - space-evenly : item 들의 사이와 양 끝에 균일한 간격을 둔다.

출처 :&nbsp;https://studiomeal.com/archives/197

 

5. align-items : 교차축 한 줄 정렬

    - stretch : 교차축으로 늘림

    - flex-start : 각 줄의 시작점으로 정렬

    - flex-end : 각 줄의 끝점으로 정렬

    - center : 각 줄의 가운데 정렬

    - baseline : 텍스트가 모두 균일하게 오게 한다.

이 상황에서 align-items: bascline을 주면?

이렇게 적용된다.

 

6. align-content(교차축 여러 줄 정렬)

    - flex-start : 시작점으로 정렬

    - flex-end : 끝점으로 정렬

    -center : 가운데 정렬

 

마지막으로 item에 적용 가능한 속성값부터 알아보자.

 

1. order : flex item의 순서를 설정

    - item에 숫자를 지정하고 숫자가 클수록 순서가 밀림(음수도 설정 가능)

출처 :&nbsp;https://heropy.blog/2018/11/24/css-flexible-box/

2. flex-grow : 증가 너비 비율을 설정

    - 더 큰 숫자를 넣은 만큼 브라우저의 크기가 커질수록 더 커진다.(0은 효과 x)

3. flex-shrink : 감소 너비 비율을 설정

    - 더 큰 숫자를 넣은 만큼 브라우저의 크기가 작아질수록 더 작아진다.(0은 효과 x)

4. align-self : 교차 축에서 item의 정렬 방법 설정

    - 이것은 그림을 보면서 이해하는 것이 더 빠를 거 같다.

출처 :&nbsp;https://heropy.blog/2018/11/24/css-flexible-box/