CSS 플렉스박스 생성기

플렉스박스는 항목을 한 방향(행 또는 열)으로 배치하고 남는 공간을 나눠 줍니다. 대부분의 레이아웃 고민은 컨테이너 속성 다섯 가지, 즉 flex-direction, flex-wrap, justify-content(주축), align-items(교차축), gap과 항목의 flex 단축 속성으로 해결됩니다. 이 생성기는 그 규칙과 맞는 HTML을 써 주고, 미리보기는 브라우저가 직접 배치하므로 각 값이 정확히 무엇을 하는지 볼 수 있습니다.

사용 방법

1. 방향을 고르고 항목이 새 줄로 넘어갈 수 있는지 정합니다.
2. 주축에는 justify-content, 교차축에는 align-items를 정합니다.
3. 간격과 항목 수를 정하고, 필요하면 항목마다 flex 값을 지정합니다.
4. CSS와 HTML을 복사합니다.

계산식

display: flex; flex-direction; flex-wrap; justify-content; align-items; [align-content]; gap · 항목: flex: <grow> <shrink> <basis>

justify-content는 행 또는 열의 방향을 따라, align-items는 그 방향에 가로질러 작동합니다. align-content는 항목이 여러 줄로 넘어갈 때만 의미가 있습니다. flex: 1은 1 1 0%의 줄임말이어서 flex: 1인 항목끼리 공간을 똑같이 나눠 가집니다.

예시

flex-wrap: wrap, justify-content: space-between, align-items: center에서 항목 3개 중 1번에 flex: 2 1 0%, 3번에 flex: 1을 주면 남는 공간을 1번이 두 몫, 3번이 한 몫 가지고, 2번은 원래 너비를 유지합니다. 기본 설정은 gap: 12px인 평범한 한 줄입니다.