CSS Flex(Flexible Box) 완벽 가이드

Flex는 요소의 크기가 불분명하거나 동적인 경우에도, 각 요소를 정렬할 수 있는 효율적인 방법을 제공합니다.

 

우선 Flex는 2개의 개념으로 나뉩니다. 첫 번째는 Container 두 번째는 Items 입니다.

Container는 Items를 감싸는 부모 요소이며, 각 Item을 정렬하기 위해선 Container가 필수입니다.

주의할 부분은 Container와 Items에 적용하는 속성이 구분되어 있다는 것입니다.

-------------------------------------------------------------------------------------------------

Flex Container

1. display

display: flex(Block 특성), display: inline-flex(Inline 특성)로 정의합니다. 

차이는 수직 쌓임과 수평 쌓임을 가집니다. 여기서 말하는 수직과 수평 쌓임은 Items가 아니라 Container라는 것에 주의해야 합니다. 두 값의 차이는 내부에 Items에는 영향을 주지 않습니다.

2. flex-flow

flex-flow 속성은 flex-direction와 flex-wrap의 단축 속성이다. Flex-Items의 주 축(main-axis)을 설정하고 Items의 여러 줄 묶은(줄 바꿈)도 설정합니다.

 

사용예) .flex-container{

             flex-flow: flex-direction속성 flex-wrap속성;

          }

 

2-1. flex-direction {Items의 주 축(main-axis)을 설정합니다.}

2-2. flex-wrap {Items의 여러 줄 묶음(줄 바꿈)을 설정합니다.}

3. justify-content

주 축(main-axis)의 정렬 방법을 설정합니다.

4. align-content

교차 축(cross-axis)의 정렬 방법을 설정합니다.

※ 주의할 점은 flex-wrap 속성을 통해 Items가 2줄 이상이고 여백이 있을 경우만 사용 가능

※ Items가 한 줄일 경우에는 align-items 속성을 사용하세요.

5. align-items

교차 축(cross-axis)에서 Items의 정렬 방법을 설정합니다. Items가 한 줄일 경우 많이 사용합니다.

※ 주의 할 점은 Items가 2줄 이상일 경우에는 align-content 속성이 우선합니다. 따라서 align-items를 사용하려면 align-content 속성을 기본값(stretch)으로 설정해야 합니다.

 

-------------------------------------------------------------------------------------------------

Flex Items

Flex Items의 속성들은 다음과 같습니다.

1. order

Item의 순서를 설정합니다. Item에 숫자가 클수록 순서가 밀립니다.

※ 음수가 허용, HTML 구조와 상관없이 순서를 변경할 수 있기 때문에 유용합니다.

2. flex

Item의 너비(증가,감소,기본)를 설정하는 단축 속성입니다.

flex-grow를 제외한 개별 속성은 생략할 수 있습니다.

※ flex-basis의 기본값은 auto입니다만 단축 속성인 flex에서 그 값을 생략할 경우 0이 적용 됩니다.

정리하면 flex: 1; 혹은 flex: 1 1;은 flex: 1 1 0;이 된다는 것입니다. 이 부분을 조심하세요.

 

3. align-self

교차 축(cross-axis)에서 개별 Item의 정렬 방법을 설정합니다.

align-items는 Container 내 모든 Items의 정렬 방법을 설정합니다.

필요에 의해 일부 Item만 정렬 방법을 변경하려고 할 경우 align-self를 사용할 수 있습니다.

이 속성은 align-items 속성보다 우선합니다.

 

https://heropy.blog/2018/11/24/css-flexible-box/

이 곳을 참고하여 글을 작성하였습니다. 감사합니다.

CSS Flex(Flexible Box) 완벽 가이드