Flex란?
css의 레이아웃 전용 기능을 하는 속성입니다.
초창기의 테이블 레이아웃을 벗어나 최근 들어서 float 과 display 속성을 사용한 레이아웃 사용했었습니다. 이런 방법들은 css를 이용해 단순히 레이아웃을 아름답게 만들기위한 편법 같은것에 불과했는데요.
display:flex 속성은 레이아웃 구성만을 위해 만들어진 전용 기술으로 기존 방식보다 훨씬 강력하고 편리한 기능들이 많습니다.
Flex 구조는 크게 두 영역으로 나뉩니다.
flex container: flex를 적용할 부모요소flex item: flex 박스 내부의 자식요소
위 이미지 처럼 Container ,item 영역으로 나뉘어있고, 각 영역에 적용할 수 있는 속성 또한 두 가지로 분류됩니다.
Container ( 부모요소, flex Box )
우선 Container 영역에 적용할 수 있는 속성들에 대해 알아보겠습니다. Container 에 적용하는 속성이니 만큼, item 들의 정렬 방식에 관한 속성이 많을거라고 예상합니다.
display:flex
flex를 사용할 부모 요소에 flex를 적용해주는게 시작입니다. 이 한줄의 코드로 자식 요소들의 위치는 아래와 같이 배치됩니다.
diplay:flex
flex를 설정하면 기본적으로 아래 상태가 됩니다.
- 자식 요소들의 기본 정렬 축은 가로이다.
- 넓이 : 자식 요소들은 자신의 콘텐츠 넓이만큼의 영역을 가진다.
- 높이 : 자식 요소들은 부모의 높이 만큼의 영역을 가진다.
아래 그림은 flex 와 float 의 차이 입니다.
display: inline-flex
inline-flex 는 display : inline-block 와 같은 용도로 사용합니다.
flex-direction
아이템들이 정렬될 메인축 방향을 설정합니다.
| row | row-reverse | column | column-reverse |
|---|---|---|---|
 |  |  |  |
flex-wrap
아이템들의 줄바꿈을 설정하는 속성입니다.
| nowrap ( 기본 속성 ) | wrap | wrap-reverse |
|---|---|---|
 |  |  |
| 줄바꿈을 하지 않습니다. 부모 영역을 넘어선 아이템은 삐져나옵니다. 단, 콘텐츠 내용의 띄어쓰기 ( 공백 ) 부분은 자동 줄바꿈 처리 | 줄바꿈을 합니다. 부모 영역을 넘어선 아이템은 아래로 밀려납니다. | 줄바꿈을 합니다. 부모 영역을 넘어선 아이템은 위로 밀려납니다. |
flex-flow
flex-direction, flex-wrap 두 속성을 한번에 지정하는 속성입니다.
flex-flow : row wrap;justify-content
메인 축 방향으로 아이템들을 정렬하는 속성입니다. 아래 설명하는 내용은 메인축이 가로일 때 상황을 전제로 작성하였습니다.
주의메인축과 교차축은 언제나 뒤바뀔 수 있습니다. flex-direction 으로 변경이 가능하니까요. 즉, 메인축이 가로, 세로냐에 따라 바뀐다는 말입니다.
- flex-direction : row ( 가로배치 ) 상태에서 justify-content 는 좌 우 정렬을 하고,
- flex-direction : column ( 세로배치 ) 상태에서 justify-content 는 상 하 정렬을 합니다.
| flex-start | flex-end | center |
|---|---|---|
 |  |  |
| 기본값 : 메인축 시작점 정렬 | 메인축 끝점 정렬 | 메인축 가운데 정렬 |
| space-between | space-around | space-evenly |
 |  |  |
| 아이템 사이(between) 균일한 간격으로 정렬 | 아이템 둘레(around) 균일한 간격으로 정렬 | 아이템 사이와 양끝을 균일한 간격으로 정렬 |
이미지 출처 : https://studiomeal.com/archives/197
align-items
교차 축 방향으로 아이템들을 정렬하는 속성입니다. 아래 설명하는 내용은 메인축이 가로일 때 상황을 전제로 작성하였습니다.
| stretch | flex-start | flex-end |
|---|---|---|
 |  |  |
| 아이템이 교차축 방향으로 부모박스의 넓이 만큼 늘어납니다. | 아이템이 교차축의 시작점으로 정렬됩니다. | 아이템이 교차죽의 끝점으로 정렬됩니다. |
| center | baseline | |
 |  | |
| 아이템이 교차축의 중앙으로 정렬됩니다. | 아이템이 텍스트 베이스라인을 기준으로 정렬됩니다. |
align-content
justify-content 의 교차축 버전입니다. 단, 교차축 같은 경우 item 의 양이 많아져 flex-wrap:wrap 로 줄바꿈이 일어났을 때만 정확한 효과를 볼 수 있습니다. 얼핏보면 align-items 와 비슷할 수 있지만 다릅니다.
| stretch(기본) | flex-start | flex-end |
|---|---|---|
 |  |  |
| align-items 의 스트레치와 같습니다. | 교차축 시작점 정렬 | 교차축 끝점 정렬 |
| space-between | space-around | space-evenly |
 |  |  |
| 교차축 기준 아이템 사이(between) 균일한 간격으로 정렬 | 교차축 기준 아이템 둘레(around) 균일한 간격으로 정렬 | 교차축 기중 아이템 사이와 양끝을 균일한 간격으로 정렬 |
| center | ||
 | ||
| 교차축 기준 가운데 정렬 |
정리
display:flex: 부모 요소에 flex 를 설정합니다.flex-direction: 아이템의 메인축을 설정합니다. ( 기본 정렬 : 가로 )flex-wrap: 아이템이 부모요소의 메인축을 넘어가는 양일 떄 줄바꿈을 설정합니다. ( 기본 줄바꿈 : 교차축의 진행 방향 )flex-flow: direction, wrap 를 한번에 설정합니다.justify-content: 아이템을 메인축 기준으로 정렬합니다. ( direction 속성으로 메인축이 변경되면 변경된 메인축을 따름 )align-items: 아이템을 교차축 기준으로 정렬합니다.align-content: 아이템을 교차축 기준으로 정렬합니다. 아이템의 줄바꿈이 일어났을 때 justify-content의 교차축 버전으로 사용합니다.
여기까지가 부모 요소에 적용할 수 있는 속성들이었습니다. 이제 아이템에 적용 가능한 속성을들 파헤쳐볼까요?
Item ( 자식요소, Flex Item )
Container 내부의 Item 요소들에게 설정하는 속성을 알아보겠습니다.
flex-basis ( 유연한 기본 값 )
아이템의 기본 크기를 설정합니다. ( 메인축에 따라 row : 넓이 , column : 높이 )
basis 설정 시, basis 값보다 넓이가 작은 아이템은 basis 값으로 늘어나고, basis 보다 큰 아이템은 영향이 없습니다.
중요
width 속성으로 넓이를 설정하는 경우, 아이템의 콘텐츠가 밖으로 삐져나오게 됩니다.word-wrap:break-word를 적용해서 삐져나가는 걸 막아주세요
flex-grow ( 유연하게 늘리기 )
Container 에 남은 공간을 Item 에게 분배해주는 속성입니다.
| 0 ( 기본값 ) | 양수 | 각 아이템에 비율 지정 |
|---|---|---|
 |  |  |
| 기본 값은 0 이고 아무런 분배를 하지 않습니다. | 0이상 양수는 모든 아이템이 동일한 영역을 나누어가집니다. | 2:1:1 비율로 분배 |
주의
비율로 분배 같은 경우, 아래와 같은 코드로 분배됩니다. 다만 아이템의 크기와 상관없이 여백을 비율로 가져가기 때문에, 아이템의 형태에 따라 부자연스러워 보일 수 있습니다.
.items:nth-child(1) {
flex-grow: 2;
}
.items:nth-child(2) {
flex-grow: 1;
}
.items:nth-child(3) {
flex-grow: 1;
}
아래 그림과 같은 경우 1:2:1 비율로 적용된 상환인데, 콘텐츠의 내용량에 따라 비율이 달라지는게 보이시죠?
이미지 출처 : https://studiomeal.com/archives/197
flex-shrink ( 유연하게 줄이기 )
Item 의 메인축의 넓이를 자연스럽게 줄일지 고정할지 정하는 속성입니다.
A,B,C 의 넓이는 모두 같습니다. shrink : 0 속성을 설정한 B Item 만 원래 크기를 유지하고 있습니다. Item 들의 shrink 속성 기본 값은 1 입니다. 넓이를 고정할 Item 에게 shrink 속성을 부여해주세요.
align-self
align-items 의 아이템 버전입니다. align-items 가 모든 아이템에게 영향을 주는것과 반대로 이 속성은 개별 아이템의 교차축 정렬입니다.
align-items 의 속성을 상속받으므로 모두 사용이 가능합니다.
주의
align-self 는 align-items 보다 우선권이 있습니다.
order
Item 들의 시각적 나열 순서를 결정합니다. html 요소의 순서가 변경되는것이 아니기때문에 접근성 측면에서 사용에 주의해야 합니다. 스크린리더기는 이를 반영해주지 않으니까요^^
z-index
Z축 정렬을 해줍니다. 숫자가 클수록 위로 올라옵니다.
정리
flex-basis: 아이템의 기본 크기를 설정합니다. row:넓이 column:높이flex-grow: 아이템 외의 여백을 아이템들에게 분배합니다. 아이템의 콘텐츠 넓이를 고려하지않고, 여백의 넓이만 분배합니다. ( 비율 설정 가능 )flex-shrink: 아이템의 넓이를 고정할지 유연하게 할지 정합니다. 기본값은 1으로 콘테이너의 넓이의 변경에따라 아이템의 넓이도 변합니다.flex: basis, grow, shrink 한번에 작성할 수 있는 축약 문법입니다.align-self: 설정한 아이템의 교차축 정렬을 합니다. align-content 보다 우선적으로 처리됩니다.order: 화면에 표시되는 아이템의 순서를 강제로 변경합니다. html 요소 순서는 변경되지 않습니다. 접근성에 주의하세요z-index: 화면에 표시되는 아이템의 Z 축 정렬을 합니다. 숫자가 높을수록 위로 올라옵니다.
이상으로 flex에 대해 알아보았습니다.
