CSS Flexbox 플레이그라운드

Flexbox(CSS Flexible Box 레이아웃)는 아이템을 단일 행 또는 열에 배치하고 공간을 분배하기 위한 1차원 레이아웃 모델입니다. 부모 요소에 display: flex 한 줄을 추가하면 자식들이 flex 아이템이 되어 float이나 수동 마진 없이 정렬·배치·크기 조절이 가능합니다. 가운데 정렬, 등고 컬럼, 내비게이션 바, 카드 행 등 이전에는 번거로웠던 작업을 쉽게 처리할 수 있어 널리 사용됩니다.

컨테이너 요소에 display: flex를 추가하고 컨테이너 속성으로 자식을 제어합니다——flex-direction(row 또는 column), justify-content(주축 방향 간격), align-items(교차축 정렬), flex-wrap, gap. 예를 들어 .nav { display: flex; justify-content: space-between; align-items: center; gap: 16px; }는 로고와 링크를 수직 가운데 정렬하여 양쪽 끝에 배치합니다.

부모를 flex 컨테이너로 만들고 양쪽 축에서 가운데 정렬하세요: .parent { display: flex; justify-content: center; align-items: center; }——이렇게 하면 자식이 수평·수직 모두 정확히 중앙에 위치합니다. 정렬할 공간이 필요하므로 부모에 높이를 설정하세요(예: 전체 화면 정렬의 경우 min-height: 100vh). 단일 요소를 완벽하게 가운데 정렬하는 가장 깔끔한 방법입니다.

justify-content는 주축을 따라 아이템을 배치하고, align-items는 교차축을 따라 배치합니다. 주축은 flex-direction이 결정합니다. 기본 flex-direction: row에서는 justify-content가 수평 간격을 담당하고 align-items가 수직 정렬을 담당합니다. flex-direction: column으로 바꾸면 둘의 역할이 바뀝니다. 도구의 실시간 축 범례가 방향 변경 시 어느 것이 어느 것인지 보여 줍니다.

flex 아이템의 크기를 결정하는 아이템별 세 가지 속성으로, 보통 flex 단축속성으로 함께 작성합니다. flex-basis는 여유 공간을 나누기 전 초기 크기입니다. flex-grow는 남은 공간을 채우기 위해 얼마나 적극적으로 확장하는지를 나타냅니다(0=확장 안 함, 1=지분 차지). flex-shrink는 공간이 부족할 때 얼마나 기꺼이 줄어드는지를 나타냅니다. 흔히 쓰는 flex: 1은 모든 아이템이 동등하게 커진다는 뜻입니다.

컨테이너에 flex-wrap: wrap을 설정하면 공간이 부족한 아이템이 넘치거나 찌그러지는 대신 새 줄로 이동합니다. 기본값 flex-wrap: nowrap은 모든 것을 한 줄에 강제합니다. 줄 바꿈을 활성화한 후 아이템에 flex-basis(예: flex: 1 1 200px)를 설정하여 각 줄이 깔끔하게 채워지게 하고, align-content로 만들어진 줄들을 정렬하세요.

가입 없이 무료입니다. 전체 플레이그라운드가 브라우저에서 실행됩니다——레이아웃, 생성된 CSS, 공유 링크 모두 기기에서 만들어지며 서버에 업로드되지 않습니다. 페이지를 로드한 후 북마크하여 오프라인으로 사용할 수 있습니다. 계정을 만들 필요가 없고 구성할 수 있는 레이아웃 수에 제한이 없습니다.