CSS Flexbox Playground

Flexbox 레이아웃을 대화형으로 구축하고 시각화하세요. 컨테이너와 아이템 속성을 조정하고 라이브 미리보기를 확인하세요.

작동 방식: 컨테이너와 아이템 속성을 조정하여 flexbox 레이아웃을 구축하세요. 미리보기에서 변화를 즉시 확인하세요. 완성되면 생성된 CSS를 복사하세요.

12px
1
2
3
.container {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  align-content: stretch;
  gap: 12px;
}

CSS Flexbox란?

CSS Flexbox (Flexible Box Layout)는 행이나 열에 아이템을 배열하기 위한 1차원 레이아웃 방식입니다. 강력한 정렬 기능과 동적 공간 배분을 제공하여 컴포넌트 레이아웃, 네비게이션 바, 그리고 반응형 디자인의 최고의 선택지입니다.

Flexbox Playground 사용 방법

컨테이너 속성을 조정하는 것부터 시작하세요. flex-direction은 메인 축을 제어하고, justify-content는 메인 축을 따라 공간을 분배하며, align-items는 교차 축에 자식을 배치합니다. 자식 아이템을 추가하거나 제거하고 flex-grow, flex-shrink, flex-basis 값을 커스터마이징하여 사용 가능한 공간에 어떻게 반응하는지 확인하세요.

Flexbox vs. CSS Grid

Flexbox는 1차원 레이아웃 — 행 또는 열 중 하나를 위해 설계되었습니다. CSS Grid는 행과 열을 동시에 처리하는 2차원 레이아웃을 담당합니다. 컴포넌트 레벨 레이아웃(네비게이션 바, 카드 행, 폼 컨트롤)에는 Flexbox를, 페이지 레벨 레이아웃에는 Grid를 사용하세요. 함께 사용하면 정말 좋습니다.

일반적인 Flexbox 패턴

  • 센터 정렬: justify-content와 align-items를 center로 설정
  • 사이드바 레이아웃: 한 아이템은 고정 너비, 다른 하나는 flex-grow: 1
  • 네비게이션 바: row 방향에 space-between
  • Holy grail: 헤더, 푸터, 그리고 중첩된 flex로 만든 3열 본문
  • 동일 너비 칼럼: 모든 자식에 flex: 1 설정
  • 반응형 wrap: 백분율 기반 flex-basis와 함께 flex-wrap 사용