CSS Flexbox 생성기

사용 방법

1. 1

   방향 선택

   가로 주축이면 row, 세로 주축이면 column을 고릅니다. reverse 값은 DOM 순서는 그대로 두고 시작하는 쪽만 뒤집습니다. 나머지 속성은 모두 이 축을 기준으로 해석됩니다.

2. 2

   줄바꿈 여부

   wrap은 공간이 모자라면 항목을 다음 줄로 내리고, wrap-reverse는 새 줄을 위쪽으로 쌓으며, nowrap은 한 줄에 두고 항목을 줄입니다. 아이템 수를 10개 이상으로 늘리면 좁은 미리보기에서 차이를 바로 볼 수 있습니다.

3. 3

   justify-content 설정

   주축을 따라 항목을 배분합니다. flex-start, center, flex-end, space-between, space-around, space-evenly 중에서 고릅니다.

4. 4

   align-items 설정

   교차축 방향 정렬입니다. stretch, flex-start, center, flex-end, baseline 중에서 고릅니다.

5. 5

   간격 입력

   0에서 96픽셀 사이의 정수 간격을 입력합니다. 연결 스위치가 켜져 있으면 gap: 16px처럼 한 값으로, 꺼져 있으면 행·열 간격이 gap: 8px 24px처럼 따로 출력됩니다.

6. 6

   아이템 하나 조절하고 복사

   상자를 클릭해 늘어남·줄어듦·기준 크기·개별 정렬·순서를 바꿉니다. 컨테이너 탭은 컨테이너 규칙에, 아이템 탭은 자식 요소의 규칙에 복사해 넣으세요.

작동 원리

실제 예시

row, wrap, space-between, center, gap 16

display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
gap: 16px;

column, nowrap, center, stretch, gap 8

display: flex;
flex-direction: column;
flex-wrap: nowrap;
justify-content: center;
align-items: stretch;
gap: 8px;

row, nowrap, center, center, gap 0

display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: center;
align-items: center;
gap: 0px;

row, wrap, 줄 정렬 center, 행 간격 8, 열 간격 24

display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: flex-start;
align-items: stretch;
align-content: center;
gap: 8px 24px;

아이템 1: 줄어듦 0, 기준 크기 140 / 아이템 2: 늘어남 1

.item-1 {
  flex: 0 0 140px;
}

.item-2 {
  flex: 1 1 auto;
}

gap 4.5

0~96 사이의 정수를 입력해 주세요.

자주 하는 실수

• column 모드에서 두 축을 혼동

  column으로 바꾸면 justify-content: center는 세로 가운데, align-items: center는 가로 가운데가 됩니다. 엉뚱한 속성을 계속 바꾸다가 flexbox가 고장 났다고 결론짓기 쉽습니다.

• min-width: auto 때문에 항목이 넘침

  flex 항목은 기본적으로 콘텐츠의 최소 크기보다 작아지지 않습니다. 긴 단어나 이미지가 있으면 행이 컨테이너보다 넓어질 수 있습니다. 항목에 min-width: 0이나 overflow: hidden을 주면 줄어듭니다.

• space-around가 고르게 보일 것이라는 기대

  space-around는 각 항목 양쪽에 같은 몫을 주기 때문에 항목 사이 간격이 가장자리 간격의 두 배입니다. 모든 간격을 같게 하려면 space-evenly를 쓰세요.

• 높이가 없으면 세로 정렬도 없음

  align-items: center를 줬는데 아무것도 안 움직이면 속성이 동작하지 않는 것이 아니라 교차축에 남는 공간이 없는 것입니다. 컨테이너에 min-height를 지정하세요.

• gap과 margin을 겹쳐 사용

  gap은 항목 사이에만 공간을 더합니다. 자식에 margin도 있으면 합쳐지므로 gap 16px에 margin 8px씩이면 이웃 사이가 32px이 됩니다.

자주 묻는 질문

더 깊이 읽기

• 7분 읽기Flexbox와 Grid의 차이, 언제 무엇을 쓸까: 판단표와 바로 쓰는 CSSFlexbox는 콘텐츠 크기를 기준으로 한 축 위에 요소를 늘어놓고, Grid는 먼저 정한 2차원 구조에 요소를 끼워 넣습니다. 레이아웃 버그는 대개 둘 중 하나를 골라 놓고 그 성질을 거스르면서 생깁니다.