CSS 예제 8 / 20
Flexbox 는 한 방향(1차원) 정렬에 최적화된 레이아웃입니다. 컨테이너(부모)에 display:flex 를 걸고 정렬 속성을 조절해보세요.
flexbox
justify-content
align-items
flex-wrap
💡 이렇게 바꿔보세요
justify-content 는 주축(direction) 방향 정렬, align-items 는 그 반대(교차축) 방향 정렬이에요flex-direction: column 으로 바꾸면 주축/교차축이 서로 뒤바뀝니다- 아이템 개수·정렬을 슬라이더로 실시간 조작하는 더 깊은 실습은 Flexbox & Grid 도구를 참고하세요
← CSS 예제 목록