17 lines
1.1 KiB
Markdown
17 lines
1.1 KiB
Markdown
# Flexbox
|
|
|
|
flexbox로 레이아웃할 요소의 부모 요소에 `display: flex`를 지정합니다.
|
|
인라인 항목을 flexbox로 취급해 레이아웃하길 희망한다면 `display: inline-flex`로 지정할 수도 있습니다.
|
|
|
|
```CSS
|
|
div {
|
|
display: flex;
|
|
}
|
|
```
|
|
|
|
요소들을 flexbox로 레이아웃될 때 그 상자들은 두 개의 축을 따라 배치됩니다.
|
|
* 기본 축 (main axis) 은 flex item이 배치되고 있는 방향으로 진행하는 축입니다(예: 페이지를 가로지르는 행 또는 페이지 밑으로 쌓이는 열). 이 기본 축의 시작과 끝을 일컬어 main start과 main end라고 합니다.
|
|
* 교차축 (cross axis) 은 flex item이 내부에 배치되는 방향에 직각을 이루는 축입니다. 이 축의 시작과 끝을 일컬어 cross start과 cross end라고 합니다.
|
|
* display: flex이 설정된 부모 요소(우리 예제에서 <section>이 해당)를 일컬어 flex container (flex container) 라고 합니다.
|
|
* flex container 내부에 flexbox로 레이아웃되는 항목을 일컬어 flex item (flex items) 이라고 합니다(우리 예제에서 <article> 요소가 해당됩니다).
|