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 | Item의 배치 순서를 결정 |
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으로 설정됨에 주의)본 글은 아래 링크의 내용을 참고하여 학습한 내용을 나름대로 정리한 글임을 밝힙니다.
