Flexbox · 한 방향 정렬
행이나 열 한 방향으로 요소를 배치하고 간격을 정합니다.
기본 문법
.demo { display: flex; gap: 12px; }작은 예제 css
.demo {
display: flex;
flex-wrap: wrap;
gap: 12px;
}
.item { flex: 1 1 100px; }화면에서 확인할 것
하나·둘·셋 상자가 한 줄에 배치되고 공간이 부족하면 다음 줄로 넘어갑니다.
헷갈리기 쉬운 점
- flex-direction이 row일 때 주축은 가로지만 column이면 세로가 됩니다.
- 여러 줄의 열 너비까지 같은 격자로 맞추려면 Grid가 더 적합할 수 있습니다.