FLXCSS Flexbox 생성기

CSS Flexbox 완벽 가이드

CSS Flexbox(Flexible Box Layout)는 2009년 W3C 초안이 나온 이후 현재 모든 모던 브라우저에서 지원되는 1차원 레이아웃 시스템입니다. float와 inline-block으로 힘겹게 구현하던 수직 중앙 정렬, 균등 분할, 동적 크기 조정을 단 몇 줄의 CSS로 처리할 수 있게 해줍니다. 이 도구는 버튼을 클릭하는 즉시 레이아웃이 어떻게 변하는지 시각적으로 확인하면서 CSS 코드를 복사할 수 있게 해줍니다.

Flex Container 속성 총정리

display: flex — 플렉스 컨테이너 시작

부모 요소에 display: flex를 선언하면 해당 요소가 flex container가 되고 직계 자식은 flex item이 됩니다.

.container {
  display: flex;        /* 블록 레벨 flex */
  /* display: inline-flex; */ /* 인라인 flex */
}

flex-direction — 주 축 방향

.container {
  flex-direction: row;            /* 기본값: 왼쪽→오른쪽 */
  flex-direction: row-reverse;    /* 오른쪽→왼쪽 */
  flex-direction: column;         /* 위→아래 */
  flex-direction: column-reverse; /* 아래→위 */
}

justify-content / align-items — 정렬의 핵심

/* justify-content: 주 축(main axis) 정렬 */
.container {
  justify-content: flex-start;    /* 시작점 */
  justify-content: center;        /* 중앙 */
  justify-content: flex-end;      /* 끝점 */
  justify-content: space-between; /* 양 끝 배치, 사이 균등 */
  justify-content: space-around;  /* 각 아이템 양쪽 동일 마진 */
  justify-content: space-evenly;  /* 모든 간격 균등 */
}

/* align-items: 교차 축(cross axis) 정렬 */
.container {
  align-items: stretch;    /* 기본값: 높이 채우기 */
  align-items: center;     /* 세로 중앙 */
  align-items: flex-start; /* 상단 정렬 */
  align-items: flex-end;   /* 하단 정렬 */
  align-items: baseline;   /* 텍스트 기준선 맞춤 */
}

Flex Item 속성 — 개별 아이템 제어

flex-grow / flex-shrink / flex-basis

.item {
  flex-grow: 1;    /* 남은 공간 비율 차지 */
  flex-shrink: 1;  /* 공간 부족 시 줄어드는 비율 */
  flex-basis: 0%;  /* 기본 크기 */
}

/* 단축 표기 */
.item { flex: 1; }        /* 1 1 0% */
.item { flex: none; }     /* 0 0 auto - 고정 크기 */
.item { flex: auto; }     /* 1 1 auto */

/* 실전 예시: 사이드바 + 본문 */
.sidebar { flex: 0 0 240px; }  /* 240px 고정 */
.main    { flex: 1; }          /* 나머지 공간 전부 *

Flexbox vs Grid — 언제 무엇을 쓸까?

Flexbox가 적합한 경우

• 내비게이션 바 아이템 정렬
• 버튼 그룹, 태그 목록
• 카드 내부 콘텐츠 배치
• 수직 중앙 정렬 (align-items: center)
• 동적으로 개수가 변하는 아이템 처리

CSS Grid가 적합한 경우

• 페이지 전체 레이아웃 (header, sidebar, main, footer)
• 카드 그리드 (정해진 컬럼 수)
• 행과 열을 동시에 제어해야 하는 경우
• 복잡한 2차원 배치

반응형 레이아웃 패턴

Holy Grail 레이아웃

.layout {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.header, .footer { flex: none; }

.body {
  display: flex;
  flex: 1;
}

.sidebar { flex: 0 0 200px; }
.main    { flex: 1; }

/* 모바일에서 세로 배치 */
@media (max-width: 768px) {
  .body { flex-direction: column; }
  .sidebar { flex: none; }
}

자주 묻는 질문 (FAQ)

gap과 margin의 차이는?

gap은 flex/grid 컨텍스트에서 아이템 사이 간격만 만들어 첫/마지막 아이템 외부에는 적용되지 않습니다. margin은 모든 방향에 적용되므로 가장자리에도 여백이 생깁니다. 내부 간격만 필요할 때 gap이 더 깔끔합니다.

flex: 1이 항상 동일한 크기를 보장하나요?

flex: 1은 flex-basis: 0%이므로 콘텐츠 크기를 무시하고 남은 공간을 균등 분배합니다. 반면 flex: auto는 flex-basis: auto로 콘텐츠 크기가 기준이 되어 크기가 달라질 수 있습니다.

Flexbox로 수직 중앙 정렬 하는 가장 간단한 방법은?

.center {
  display: flex;
  justify-content: center;
  align-items: center;
}

order 속성으로 순서를 바꿀 수 있나요?

네. order 속성으로 HTML 순서를 변경하지 않고 시각적 순서를 조정할 수 있습니다. 기본값은 0이며, 숫자가 작을수록 앞에 배치됩니다. 단, 스크린 리더는 HTML 순서를 따르므로 접근성에 주의하세요.

Tailwind CSS에서 Flexbox 사용하기

<div class="flex items-center justify-between gap-4">
  <span class="flex-none">로고</span>
  <nav class="flex gap-2">...</nav>
  <button class="flex-none">로그인</button>
</div>