[CSS] Flex (Flexible Box)

CSS의 Flex(Flexible Box)는 개별 요소들의 수직/수평 레이아웃 구성을 용이하게 해주는 편리한 기능이다. 많은 경우 display: block 혹은 display: inline-block으로 수직/수평 레아이웃 구성을 시도하지만, Flex를 이용하면 보다 직관적인 방법으로 레이아웃 구성이 가능하며 block과 inline-block을 사용할 때 발생할 수 있는 문제도 막을 수 있다. Flex는 각각의 개별 요소를 나타내는 Flex Item(이하 Item), 그리고 그것들을 담고 있는 Flex Container(이하 Container)로 이루어져 있다. 여기서는 Container와 Item에서 사용되는 주요 속성 값들을 정리하였다.

 

* Flex 연습해보기 : http://flexboxfroggy.com/#ko

 

1. Flex Container

1-1. display

Container가 쌓이는 방향을 설정한다. Item들이 쌓이는 방향이 아님에 주의하자. block 및 inline-block의 차이와 동일하다.

 

속성	설명
flex	Container가 수직으로 쌓이도록 설정
inline-flex	Container가 수평으로 쌓이도록 설정

 

1-2. flex-direction

Item들의 주축(main-axis) 방향을 설정한다. (교차축(cross-axis)은 주축과 수직인 축이 된다.)

 

속성	설명
row (default)	→ (Item들을 왼쪽에서 오른쪽 방향으로 표시)
row-reverse	← (Item들을 오른쪽에서 왼쪽 방향으로 표시)
column	↓ (Item들을 위쪽에서 아래쪽 방향으로 표시)
column-reverse	↑ (Item들을 아래에서 위쪽 방향으로 표시)

 

1-3. flex-wrap

Item들의 줄 바꿈 옵션을 설정한다.

 

속성	설명
nowrap (default)	Item들을 한 줄에 표시 (Item에 지정된 width 무시)
wrap	Item들을 여러 줄에 걸쳐서 표시 (Item에 지정된 width 반영)
wrap-reverse	wrap과 동일하지만 (교차축) 방향이 반대

 

1-4. justify-content

Item들의 주축(main-axis) 정렬 방법을 설정한다.

 

속성	설명
flex-start (default)	주축의 시작점에 맞춰 정렬
flex-end	주축의 끝점에 맞춰 정렬
center	주축의 가운데로 정렬
space-between	처음 Item은 주축의 시작점에, 마지막 Item은 주축의 끝점에 맞춘 뒤 나머지 Item들을 그 사이에 고르게 정렬
space-around	Item들을 사이에 균등한 여백을 두어 정렬

 

1-5. align-content

Item들의 교차축(cross-axis) 정렬 방법을 설정한다. 단, flex-wrap 속성에 의해 두 줄 이상 되고 Container에 여백이 남아 있을 경우에만 적용된다. 여러 요소들로 이루어진 각 줄을 하나의 요소처럼 취급하고 (교차축 방향으로) 정렬한다고 생각하면 된다.

 

속성	설명
stretch (default)	교차축을 채우기 위해 자동으로 늘어남 (height 또는 width가 auto인 경우에만)
flex-start	교차축의 시작점에 맞춰 정렬
flex-end	교차축의 끝점에 맞춰 정렬
center	교차축의 가운데로 정렬
space-between	처음 줄은 교차축의 시작점에, 마지막 줄은 교차축의 끝점에 맞추고 나머지 줄은 그 사이에 고르게 정렬
space-around	줄들 사이에 균등한 여백을 두어 정렬

 

1-6. align-items

Item들의 교차축(cross-axis) 정렬 방법을 설정한다. Item들이 한 줄일 때 많이 사용된다. 여러 줄 각각을 하나의 컨테이너처럼 생각하고 그 안에서 Item들을 교차축 방향으로 일괄 정렬한다고 생각하면 된다.

 

※ flex-wrap에 의해 Item들이 두 줄 이상이 된 경우, align-content 속성은 각 줄에 해당하는 컨테이너들의 교차축 방향 정렬을 결정하고, align-items 속성은 각 줄에 해당하는 컨테이너 내에서 Item들의 교차축 방향 정렬을 결정한다.

 

속성	설명
stretch (default)	교차축을 채우기 위해 자동으로 늘어남 (height 또는 width가 auto인 경우에만)
flex-start	교차축의 시작점에 맞춰 정렬
flex-end	교차축의 끝점에 맞춰 정렬
center	교차축의 가운데로 정렬
baseline	문자 기준선에 맞춰 정렬

 

* flex-flow : flex-direction, flex-wrap의 단축 속성
ex) flex-flow: row-reverse wrap;

 

2. Flex Item

2-1. order

해당 Item의 순서를 설정한다. 값이 클수록 뒤에 배치된다.

 

속성	설명
0 (default)	Item의 배치 순서를 결정
Integer

 

2-2. flex-grow

해당 Item의 너비 증가비를 설정한다. 즉, Container의 남은 총여백에서 어느 정도의 비율만큼으로 증가할 것인지를 의미한다. 예를 들어, 남은 총여백이 600px이고 세 Item의 flex-grow 값이 각각 1, 2, 3이라면 세 Item은 각각 100px, 200px, 300px만큼 증가하게 된다. 그리고 만약 flex-grow 값이 0이라면 flex-basis에 의해 지정되는 너비를 그대로 가진 채 더 이상 증가하지 않는다.

 

속성	설명
0 (default)	효과 X (증가하지 않음)
Integer	Item의 증가 너비 비율을 설정

 

2-3. flex-shrink

해당 Item의 너비 감소 비를 설정한다. Container의 너비가 감소할 때 그 너비에서 어느 정도의 비율만큼으로 감소할 것인지를 의미한다. 예를 들어, flex-basis에 의해 지정된 너비의 비가 A:B:C인 세 Item의 flex-shrink 값이 각각 1, 2, 3이라면 세 Item은 각각 A*1:B*2:C*3의 비율만큼 감소하게 된다. 이처럼 계산법이 꽤나 까다로워서 실용성은 좀 떨어지는 속성이다. 그리고 만약 flex-shrink 값이 0이라면 flex-basis에 의해 지정되는 너비를 그대로 가진 채 더 이상 감소하지 않기 때문에 Container에서 넘치는 경우가 발생할 수도 있다.

 

속성	설명
0	효과 X (감소하지 않음)
1 (default)	Item들이 동일한 비율로 감소
Integer	Item의 감소 너비 비율을 설정

 

2-4. flex-basis

해당 Item의 (공간 배분 전) 기본 너비를 설정한다. flex-grow 속성과 flex-shrink 속성의 계산에 기준이 되는 속성이다.

 

속성	설명
auto (default)	width 값을 기본 너비로 사용
Integer + 단위	지정된 width 값을 무시하고 기본 너비를 직접 설정

 

2.5 align-self

해당 Item의 교차축(cross-axis) 정렬 방법을 설정한다. align-items가 각 줄의 Item들을 일괄적으로 정렬하는 것이라면, 이는 해당 Item 하나를 정렬하고 싶을 때 사용한다. 따라서 align-items 속성보다 우선시된다.

 

속성	설명
auto (default)	Container의 align-items 속성을 상속받음
stretch	교차축을 채우기 위해 자동으로 늘어남 (height 또는 width가 auto인 경우에만)
flex-start	교차축의 시작점에 맞춰 정렬
flex-end	교차축의 끝점에 맞춰 정렬
center	교차축의 가운데로 정렬
baseline	문자 기준선에 맞춰 정렬

 

* flex : flex-grow, flex-shrink, flex-basis의 단축 속성
ex 1) flex: 1 1 20px;  /* 증가 너비, 감소 너비, 기본 너비 */
ex 2) flex: 1 1;  /* 증가 너비, 감소 너비 */
ex 3) flex: 1 20px;  /* 증가 너비, 기본 너비 */
ex 4) flex: 1;  /* 증가 너비 (이때 flex-basis는 0으로 설정됨에 주의) */

 

 

 

 

 

 

본 글은 아래 링크의 내용을 참고하여 학습한 내용을 나름대로 정리한 글임을 밝힙니다.

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