시각적으로 Flexbox 레이아웃을 디자인하고 CSS 코드를 자동으로 생성하세요. 컨테이너와 아이템 속성을 실시간으로 조정할 수 있습니다.
/* Container */
.flex-container {
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: stretch;
flex-wrap: nowrap;
gap: 10px;
}컨테이너 속성을 조정하여 Flexbox 레이아웃을 설정하고, 각 아이템의 속성을 개별적으로 조정할 수 있습니다. 실시간 미리보기를 통해 결과를 확인하고 생성된 CSS 코드를 복사하세요.
Flexbox의 주축 방향을 결정합니다. row는 가로 방향, column은 세로 방향으로 아이템을 배치합니다.
justify-content는 주축(main axis) 방향의 정렬을, align-items는 교차축(cross axis) 방향의 정렬을 제어합니다.
flex-grow는 남은 공간을 어떻게 분배할지, flex-shrink는 공간이 부족할 때 어떻게 줄일지를 결정합니다. 숫자가 클수록 더 많이 늘어나거나 줄어듭니다.
아이템 간의 간격을 설정합니다. 이전에는 margin을 사용했지만, gap을 사용하면 더 간단하게 간격을 조정할 수 있습니다.
Flexbox는 1차원 레이아웃 시스템으로, 컨테이너 내 아이템을 행(row) 또는 열(column) 방향으로 정렬합니다. flex-direction으로 주축(main axis) 방향을 결정하고, justify-content로 주축 정렬, align-items로 교차축(cross axis) 정렬을 제어합니다. flex-wrap을 wrap으로 설정하면 아이템이 넘칠 때 자동으로 다음 줄로 내려가 반응형 레이아웃 구현이 쉬워집니다.
flex-grow는 컨테이너의 남은 공간을 아이템 간에 어떤 비율로 나눌지 결정합니다. 값이 1인 아이템들은 남은 공간을 균등하게 나눠 갖고, 특정 아이템만 2로 설정하면 그 아이템이 두 배의 여유 공간을 차지합니다. flex-shrink는 공간이 부족할 때 아이템이 얼마나 줄어드는지, flex-basis는 아이템의 기본 크기를 정의합니다. 이 세 값은 flex: 1 1 auto처럼 단축 속성으로 한번에 지정할 수 있습니다.
내비게이션 바, 카드 그리드, 사이드바 레이아웃 등 다양한 UI 패턴을 Flexbox로 손쉽게 구현할 수 있습니다. 예를 들어 로고와 메뉴를 양 끝에 배치하려면 justify-content: space-between을, 버튼을 수직·수평 가운데 정렬하려면 justify-content: center와 align-items: center를 함께 사용합니다. gap 속성을 활용하면 margin 없이도 아이템 간 간격을 일정하게 유지할 수 있어 코드가 훨씬 간결해집니다.