플렉스박스 플레이그라운드

인터랙티브 비주얼 컨트롤로 플렉스박스를 마스터하세요

컨테이너 속성

디스플레이

플렉스 방향

플렉스 줄바꿈

콘텐츠 정렬

항목 정렬

콘텐츠 정렬

간격

열 간격

행 간격

컨테이너 너비

최소 높이

패딩

프리셋

항목

미리보기

Item 1

Item 2

Item 3

주 축

수평

교차 축

수직

.flex-container {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-items: stretch;
  align-content: stretch;
  gap: 10px;
  padding: 20px;
}