CSS Flexbox 생성기

생성되는 CSS

생성기는 .container 규칙 하나를 출력하며, 선언은 display: flex, flex-direction, flex-wrap, justify-content, align-items, align-content, gap 일곱 개입니다. 스타일시트에 붙여넣고 .container를 자신의 클래스명으로 바꾸세요. 기본값과 같은 값도 빠짐없이 쓰므로 필요 없는 줄은 지워도 됩니다.

드롭다운의 기본값은 CSS 초깃값입니다: row, nowrap, justify-content·align-items·align-content는 normal. 플렉스 컨테이너에서 normal은 교차 축으로 아이템과 줄바꿈된 줄을 늘이고 주 축에서는 시작점부터 배치하므로(CSS Box Alignment Level 3) 이 세 줄은 쓰지 않은 것과 같습니다. gap: 1rem은 다릅니다. 플렉스 컨테이너의 gap 초깃값은 normal, 즉 0이므로 기본 규칙에서도 아이템 사이에 1rem 간격이 생깁니다. 필요 없으면 이 줄을 지우세요. 기본 출력은 다음과 같습니다.

.container {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: normal;
  align-items: normal;
  align-content: normal;
  gap: 1rem;
}

출력에는 컨테이너 속성만 들어가며, 아이템에 쓰는 flex나 order는 포함되지 않습니다.

예시: 게시판 페이지 번호

게시판 목록 아래의 “이전 1 2 3 4 5 다음” 같은 페이지 번호를 가운데에 모으는 경우입니다. 정렬 설정을 열어 justify-content를 center, align-items를 center로 바꾸고 간격에 4px를 넣습니다.

.container {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: center;
  align-content: normal;
  gap: 4px;
}

정렬 규칙대로 계산하면, 너비 360px 컨테이너에 40px 버튼 7개를 놓을 때 버튼과 간격이 304px을 쓰고 남는 56px이 양쪽에 28px씩 나뉩니다. 버튼의 왼쪽 끝은 28, 72, 116, 160, 204, 248, 292px입니다. 버튼에 flex-shrink: 0을 지정해 너비를 고정했는데 화면이 좁아 다 들어가지 않으면 center는 양쪽으로 똑같이 넘치기 때문에 첫 번째 버튼이 왼쪽 밖으로 잘릴 수 있습니다. 그럴 때는 flex-wrap을 wrap으로 바꾸거나 표시할 번호 수를 줄입니다.

예시: 해시태그 목록 줄바꿈

“#서울맛집 #주말나들이 #한강공원”처럼 개수가 정해지지 않은 해시태그를 여러 줄로 늘어놓는 경우입니다. flex-wrap을 wrap, align-items를 flex-start, align-content를 flex-start로 바꾸고 간격에 6px 8px를 넣습니다.

.container {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: normal;
  align-items: flex-start;
  align-content: flex-start;
  gap: 6px 8px;
}

간격 두 값은 행 간격, 열 간격 순서입니다. align-content를 flex-start로 두는 이유는 컨테이너에 높이가 있을 때입니다. 초깃값 normal은 줄바꿈된 줄을 늘여 남는 높이를 채우므로, 태그가 두 줄뿐인데 컨테이너가 높으면 줄 사이가 크게 벌어집니다. flex-start로 두면 줄이 위에서부터 차곡차곡 쌓입니다.

한글 라벨과 word-break: keep-all

nowrap인 줄에서 공간이 모자라면 아이템이 줄어듭니다. 아이템 최소 너비의 초깃값 auto는 내용을 가장 좁게 접었을 때의 너비(min-content)입니다. CSS Text Level 3 명세는 Korean has two styles of line-breaking: between any two Korean syllables (word-break: normal) or, like English, mainly at spaces (word-break: keep-all).라고 설명합니다. 따라서 기본값 normal에서는 “자주 묻는 질문” 같은 라벨이 한 음절 너비까지 줄어들어 한 글자씩 세로로 쌓일 수 있고, keep-all이면 가장 긴 어절의 너비가 최소 너비가 되어 어절 단위로만 줄을 바꿉니다.

라벨을 아예 한 줄로 두려면 라벨에 flex-shrink: 0이나 white-space: nowrap을 지정하고, 대신 옆의 요소가 줄어들 수 있게 합니다. 옆 요소도 고정 너비라면 내용이 컨테이너 밖으로 넘칩니다. 이 속성들은 아이템에 쓰는 것이라 생성기는 출력하지 않습니다.

제한 사항

• 출력은 컨테이너 속성뿐입니다. flex-grow, flex-shrink, flex-basis, order, align-self 입력란은 없습니다.
• justify-content에는 stretch, start, end가 없고 align-content에는 space-evenly가 없습니다. 필요하면 복사한 뒤 직접 고칩니다.
• 간격 입력란은 값을 검증하지 않습니다. 잘못된 값도 그대로 복사되며 브라우저는 그 선언을 버립니다.
• 미리보기 아이템 수는 1~8개입니다.
• row-reverse, column-reverse는 보이는 순서만 바꿉니다. 키보드 포커스와 스크린 리더는 HTML 순서를 따릅니다.

Flexbox와 Grid 비교

1차원 레이아웃(단일 행 또는 열을 따른 아이템 배열)에는 Flexbox를 사용합니다. 행과 열을 동시에 제어하는 2차원 레이아웃에는 CSS Grid 생성기가 적합합니다.