Flexbox 플레이그라운드
CSS Flexbox를 시각적으로 실험.
Contenedor flex
/* Contenedor */
.flex-container {
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: stretch;
flex-wrap: nowrap;
gap: 8px;
}
CSS Flexbox 인터랙티브 플레이그라운드
CSS Flexbox(Flexible Box Layout)는 현대 웹 개발에서 가장 강력하고 널리 사용되는 레이아웃 시스템 중 하나입니다. 컨테이너의 아이템을 유연하고 예측 가능하게 정렬, 배분, 크기 조정할 수 있습니다.
우리 Flexbox 플레이그라운드를 사용하면 플렉스 컨테이너의 모든 속성을 시각적으로 실험할 수 있습니다: flex-direction, justify-content, align-items, flex-wrap, gap 등.
미리보기가 실시간으로 업데이트되어 각 속성이 아이템의 배치와 크기에 어떤 영향을 미치는지 즉시 확인할 수 있습니다.
자주 묻는 질문
Flexbox와 Grid 중 언제 어떤 것을 사용해야 하나요?
Flexbox는 네비게이션 바, 수평 카드 리스트, 요소 중앙 정렬 같은 1차원 레이아웃(한 행 또는 한 열)에 이상적입니다. Grid는 대시보드, 이미지 갤러리, 잡지 레이아웃 같은 2차원 레이아웃에 적합합니다.
flex-grow는 무엇을 하나요?
flex-grow는 아이템이 컨테이너의 사용 가능한 공간을 채우기 위해 얼마나 늘어날 수 있는지를 정의합니다. 0(기본값)이면 아이템은 늘어나지 않습니다. 1이면 나머지 공간을 차지합니다. 한 아이템에 2, 다른 아이템에 1을 주면 첫 번째가 두 배의 여유 공간을 차지합니다.
모든 브라우저와 호환되나요?
네, CSS Flexbox는 수년간 모든 최신 브라우저에서 완전히 지원됩니다. Chrome, Firefox, Safari, Edge, Opera 모두 완벽하게 지원합니다.
더 알고 싶으신가요? 전체 가이드 읽기 →