CSS Flexbox 생성기
flex-direction・justify-content・align-items・flex-wrap・gap을 GUI로 조작하며 실시간 미리보기로 Flexbox 레이아웃을 실험할 수 있는 무료 도구. 생성된 CSS 코드는 클릭 한 번으로 복사할 수 있다.
사용 팁
- justify-content는 「주축」 방향의 정렬을, align-items는 「교차축」 방향의 정렬을 담당합니다. flex-direction을 column으로 바꾸면 주축이 세로 방향이 되어 이 두 속성의 시각적 효과가 서로 바뀝니다.
- 「가운데 정렬」 프리셋은 justify-content: center와 align-items: center를 조합한 것으로, Flexbox로 요소를 상하좌우 가운데에 배치하는 가장 대표적인 방법입니다.
- gap 속성은 아이템 사이의 간격에만 적용되며 컨테이너 바깥쪽 여백(margin)에는 영향을 주지 않습니다. margin과 달리 인접한 아이템 사이에만 균등한 간격을 만들 수 있는 것이 장점입니다.
- 특정 아이템 하나에 align-self를 지정하면 컨테이너 전체의 align-items 설정을 무시하고 그 아이템만 다르게 정렬할 수 있습니다. 하나만 눈에 띄게 하고 싶을 때 유용합니다.
- flex-wrap: wrap을 활성화하면 컨테이너의 너비(column 모드에서는 높이)에 들어가지 않는 아이템이 자동으로 다음 줄로 넘어갑니다. 반응형 카드 레이아웃에서 자주 쓰이는 기법입니다.
자주 묻는 질문
여담 ― Flexbox가 바꾼 CSS 레이아웃의 역사
CSS Flexbox(정식 명칭: CSS Flexible Box Layout Module)가 등장하기 전, 웹 페이지의 가로 배치 레이아웃은 float 속성을 사용해 구현하는 것이 일반적이었습니다. 하지만 float는 본래 「이미지 주위로 텍스트를 흘려보내기」위한 기능이었기 때문에, 레이아웃 목적으로 사용하려면 요소의 높이가 맞지 않거나 부모 요소의 높이가 무너지는(클리어런스 문제) 등 여러 우회책(clearfix 해킹 등)이 필요했습니다.
2009년 W3C에서 첫 초안이 공개된 Flexbox는 「1차원 배치」에 특화된 레이아웃 모델로 설계되었습니다. 요소를 주축 방향으로 늘리거나, 여백을 균등하게 배분하거나, 세로 방향 가운데 정렬을 한 줄로 구현하는 등 float로는 여러 줄의 CSS 해킹이 필요했던 처리가 justify-content・align-items 같은 선언적 속성만으로 끝나게 되었습니다.
2015년 무렵 주요 브라우저에서 구현이 완료되자 Flexbox는 내비게이션 바・카드 레이아웃・폼 정렬 등 웹 디자인의 대표적인 패턴을 구현하는 표준 수단으로 빠르게 확산되었습니다. 「Flexbox로 세로 방향 가운데 정렬이 가능해졌다」는 것은 당시 프런트엔드 개발자 커뮤니티에서 특히 환영받은 변화 중 하나로 알려져 있습니다.
오늘날에는 Flexbox와 2차원 레이아웃에 특화된 CSS Grid가 역할을 분담하며 공존하고 있으며, Flexbox는 「한 방향으로 나열되는 컴포넌트 내부의 레이아웃」, Grid는 「페이지 전체의 격자형 레이아웃」이라는 형태로 조합해 사용하는 경우가 많아지고 있습니다.