flex는 CSS2까지 사용하던 float의 단점을 보완하며 나온 새로운 레이아웃 구조입니다.
flexible layout은 항상 container(부모)와 item(자식)으로 구분해서 이용합니다.
<div class="container" style="display:flex">
<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
</div>
<div class="container" style="display:inline-flex">
<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
</div>container에 적용하는 속성
위와 같이 HTML과 CSS를 작성하게 되면 display:flex를 적용한 대상이 container(기준)이 되며
flex의 바로 하위 자식요소들(box 1,2,3)이 item으로 처리되게 됩니다.
flexible box에 대한 다양한 속성을 공부하려면
container와 item의 구분도 중요하지만 메인축과 교차축에 대한 개념을 이해하셔야 flex 속성들을 쉽게 이해하며 진행할 수 있습니다. 지금 당장 이해가 안된다 하더라도 앞으로 flex를 배우면서 반복적으로 나오는 개념이기 때문에 걱정하지 않고 우선 따라해봐도 무관합니다~
메인축(main-axis)
container안 item이 정렬된 방향을 뜻합니다(기본값 row)
교차축(cross-axis)
메인축과 반대로 item을 가로지르는 방향을 교차축이라고 합니다. 쉽게 생각하여 메인축이 수평이라면 교차축은 수직이고 메인축이 수직이면 교차축은 수평이라고 생각합시다.
flex 적용 전 준비 레이아웃 상태
<div class="container">
<div class="box">A</div>
<div class="box">B</div>
<div class="box">C</div>
</div>.container .box {
width:300px; height:300px;
line-height:300px; text-align:center;
}
.container .box:nth-child(1) {background:aqua;}
.container .box:nth-child(2) {background:pink;}
.container .box:nth-child(3) {background:yellow;}
flex-direction
container에 적용하는 속성으로 container안의 item의 메인축 방향을 설정합니다.
| flex-direction:row | 왼쪽->오른쪽 수평축 (기본값) |
| flex-direction:row-reverse | 오른쪽->왼쪽 |
| flex-direction:column | 위->아래 수직축 변경 |
| flex-direction:column-reverse | 아래->위 |
See the Pen flex-basic0 by yuna122212 (@yuna122212) on CodePen.
flex-wrap
container에 적용하는 속성으로 container 내부 items 줄바꿈처리를 설정합니다.
| flex-wrap:wrap | 기본값(자동 줄바꿈) ex) 1 2 3 |
| flex-wrap:wrap-reverse | 행 기준 역방향으로 자동 줄바꿈 처리 |
| flex-wrap:nowrap | 줄바꿈하지 않음(한 줄 처리) 가변너비에 따라 자동으로 % 크기 변경 |
See the Pen flex-basic-1 by yuna122212 (@yuna122212) on CodePen.
flex-flow
container에 적용하는 속성으로 flex-direction과 flex-wrap을 묶음으로 처리할 수 있습니다.
| flex-direction:column + flex-wrap:nowrap 일 경우(아래) |
| flex-flow:column nowrap 이라고 작성 가능 |
See the Pen flex-basic-2 by yuna122212 (@yuna122212) on CodePen.
justify-content
container에 적용하는 속성으로 메인축의 정렬방법을 설정합니다.
| justify-content:flex-start | items의 시작점 container의 시작점으로 정렬 |
| justify-content:flex-end | items의 시작점 container의 끝점으로 정렬 |
| justify-content:center | items을 메인축 기준 container에서 가운데 정렬 |
| justify-content:space-between | items을 container의 start, end 양끝 items을 배치하고 나머지는 고르게 정렬 |
| justify-content:space-around | items을 container안에서 균등한 여백을 포함하여 정렬 |
See the Pen flex-basic-3 by yuna122212 (@yuna122212) on CodePen.
align-content
container에 적용하는 속성으로 교차축의 아이템이 2줄 이상일 경우 정렬방법입니다.
* flex-wrap:wrap 적용한 상태로 확인하세요.
| align-content:stretch | 기본값(교차축 기준으로 아이템 늘리기) |
| align-content:flex-start | container의 start지점 기준 item 정렬 |
| align-content:flex-end | container의 end 지점 기준 item 정렬 |
| align-content:center | container의 가운데 위치 기준 item 정렬 |
| align-content:space-between | container의 start, end 에 양쪽 끝 맞추고 나머지 item 균등하게 정렬 |
| align-content:space-around | container에서 모든 item 균등하게 정렬 |
See the Pen flex-basic-4 by yuna122212 (@yuna122212) on CodePen.
align-items
container에 적용하는 속성으로 교차축의 아이템이 1줄 일 경우 정렬방법입니다.
| align-items:stretch | (기본값) 교차축 방향 시작지점에 맞춰서 정렬(start와 거의 차이 없음) |
| align-items:flex-start | 교차축 기준 container의 시작지점에 맞춰서 정렬(왼쪽 / 위) |
| align-items:flex-end | 교차축 기준 container의 종료지점에 맞춰서 정렬(오른쪽/아래) |
| align-items:center | 교차축 기준 container의 가운데지점에 맞춰서 정렬(수직중앙, 수평중앙) |
| align-items:baseline | 교차축 기준 container의 시작지점에 맞춰서 정렬(왼쪽 / 위) |
See the Pen flex-basic-5 by yuna122212 (@yuna122212) on CodePen.
align-self
item에 적용하는 속성으로 container에 적용하는 align-items보다 우선순위가 높습니다.
flex box의 교차축을 정렬합니다.
| align-self:flex-start | 교차축 기준 container의 start 시작 위치(top or left) |
| align-self:flex-end | 교차축 기준 container의 end 종료 위치(bottom or right) |
| align-self:center | 교차축 기준 container의 center 중심 위치(center, middle) |
| align-self:baseline | 교차축 기준 container의 baseline 위치(내용 크기에 따라 다름(기본은 start동일)) |
See the Pen flex-basic-6 by yuna122212 (@yuna122212) on CodePen.
order
item에 적용하는 속성으로 아이템의 정렬 순서 설정
| order:-1 | ex) 예시 숫자 중 가장 작은 수로 첫번째 정렬된다. |
| order:0 | ex) 예시 숫자 중 두번째 큰 수로 두번째 정렬된다. |
| order:1 | ex) 예시 숫자 중 가장 큰 수로 세번째 정렬된다. |
See the Pen flex-basic-7 by yuna122212 (@yuna122212) on CodePen.
flex-grow
item에 적용하는 속성으로 container 너비에서 각 아이템의 증가 비율을 뜻합니다.
* 증가 비율이 클 수록 크게 표시됩니다.
* 디바이스 너비를 item보다 크거나 같을 경우 적용됩니다.(커질 수록 차이가 나타납니다)* 디바이스 너비를 item보다 작게 설정하면 flex-grow 관계없이 일정 비율로 조정됩니다.
| flex-grow:1 |
See the Pen flex-basic-grow-8 by yuna122212 (@yuna122212) on CodePen.
flex-shrink
item에 적용하는 속성으로 container 너비에서 각 아이템의 감소 비율을 뜻합니다.
* 감소 비율이 클 수록 작게 표시됩니다.
* 디바이스 너비를 item보다 작거나 같을 경우 적용됩니다.(작아질 수록 차이가 나타납니다)
* 디바이스 너비를 item보다 크게 설정하면 flex-shrink 관계없이 일정 비율로 조정됩니다.
| flex-shrink:1 |
See the Pen flex-basic-shrink-9 by yuna122212 (@yuna122212) on CodePen.
flex-basis
item에 적용하는 속성으로 container 너비에서 각 아이템의 기본 크기를 뜻합니다. (기본값 auto)
요소에 width값이 적용되어 있는 경우 flex-basis를 설정하면 width값과 동일한 값으로 인식합니다.
* basis 너비보다 디바이스가 작아지변 가변형으로 변경됩니다.
* auto는 내용 크기만큼 자동 인식됩니다.
| flex-basis:auto flex-basis:0 flex-basis:100px |
See the Pen flex-basic-basis-10 by yuna122212 (@yuna122212) on CodePen.
flex
item에 적용하는 속성으로 증가/감소/기본의 묶음 속성입니다.
주의사항!) basis값은 설정 안할 시 기본값 auto가 아닌 숫자 0 으로 인식합니다.
| flex:1 0 auto | grow(1) shrink(0) basis(auto) |
| flex:1 1 200px | grow(1) shrink(1) basis(200px) |
| flex:1 2 | grow(1) shrink(2) basis(0) |
| flex:2 100px | grow(2) shrink(x) basis(100px) |
| flex:1 | grow(1) shrink(x) basis(0) |
| flex:1 auto | grow(1) shrink(x) basis(auto) |
| flex:auto | grow(x) shrink(x) basis(auto) |
| flex:100px | grow(x) shrink(x) basis(100px) |
See the Pen flex-basic-flex11 by yuna122212 (@yuna122212) on CodePen.