Rows with Flexbox
This page needs a recent browser (with SharedArrayBuffer support). Please update Chrome, Edge, Firefox or Safari to the latest version. · 이 페이지는 최신 브라우저(SharedArrayBuffer 지원)가 필요합니다. Chrome, Edge, Firefox 또는 Safari를 최신 버전으로 업데이트해 주세요.
English
Putting boxes in a row
- By default, boxes stack downward. Often you want them side by side.
- Flexbox is the easy way to do that.
- Put
display: flex;on the container — the box that holds the others — and its children line up in a row.
한국어
박스를 행에 배치하기
- 기본적으로 박스는 아래쪽으로 쌓입니다. 보통은 나란히 배치하고 싶을 것입니다.
- 플렉스박스가 가장 쉬운 방법입니다.
- 다른 박스를 포함하는 컨테이너에
display: flex;을 적용하면 자식들이 행으로 정렬됩니다.
English
Spacing them out
- Once a box is
display: flex;, you control how its children spread. justify-content: space-between;pushes them apart, with gaps between.gap: 12px;adds an even space between every child.
한국어
간격 조절하기
- 박스가
display: flex;이 되면 자식이 어떻게 퍼지는지 제어할 수 있습니다. justify-content: space-between;은 간격을 두고 박스 사이를 멀리 둡니다.gap: 12px;은 모든 자식 사이에 균등한 간격을 추가합니다.
<style>
.bar { display: flex; justify-content: space-between; }
.btn { background-color: #6c5; padding: 10px 16px; }
</style>
<div class="bar">
<span class="btn">Home</span>
<span class="btn">About</span>
<span class="btn">Contact</span>
</div>
English
Common mistakes
display: flexgoes on the container, not on the items.justify-contentspaces items along the row.
한국어
흔한 실수
display: flex은 컨테이너에, 아이템에는 적용하지 않습니다.justify-content는 행을 따라 항목 사이에 간격을 둡니다.
English
Now you try
display: flexgoes on the container, not the items.- Turn a box into a row, then spread its children out.
한국어
이제 직접 해보기
display: flex은 컨테이너에, 아이템에는 적용하지 않습니다.- 박스를 행으로 변환한 후 자식을 펼쳐보세요.
Explore · 탐색하기
Flexbox lays out a row
justify-content spaces items along the row; align-items across it.
Put the three boxes side by side. Add display: flex; to the .row rule.
Spread the boxes evenly across the row. Add justify-content: space-between; to the .row rule.