🧱 CSS Flexbox 코드 생성기 | 옵션 골라 복사

flex-direction (주축 방향)

justify-content (주축 정렬)

align-items (교차축 정렬)

flex-wrap (줄바꿈)

align-content (여러 줄 정렬 · wrap 일 때만 적용)

gap (아이템 간격)

아이템 flex 값 (컨테이너 자식에 적용)

미리보기 아이템 개수

개

Flexbox 코드를 외우지 않고 만드는 법

가로 한 줄 메뉴, 가운데 정렬 카드, 공간을 나눠 갖는 버튼 줄은 모두 flex 컨테이너 하나로 끝납니다. 매번 헷갈리는 건 justify-content 와 align-items 중 어느 쪽이 가로인지입니다. 고른 값을 미리보기 박스에 적용하고 같은 값을 붙여 쓸 CSS 로 내보냅니다.

어떤 선언이 나오는지

컨테이너에는 display·flex-direction·justify-content·align-items·flex-wrap·gap 이 나오고, align-content 는 고른 경우에만 붙습니다. 아이템 flex 값을 고르면 자식 선택자 블록이 생기고, 1 1 0 은 긴 글이 칸을 밀어내지 못하게 min-width: 0 을 함께 넣습니다. 속성 표기는 W3C CSS Flexible Box Layout 명세를 따릅니다(2026년 10월 기준).

하지 않는 것

아이템별 order·align-self, 그리드 트랙 선언, 전환 효과는 만들지 않습니다. 격자 배치는 Grid 속성, 전환은 transition 도구가 담당합니다. 미리보기는 이 브라우저가 해석한 결과라서, 실제 화면에서는 부모 폭·글꼴에 따라 줄바꿈 지점이 달라집니다.

자주 묻는 질문

justify-content 와 align-items 중 어느 쪽이 가로인가요?

flex-direction 이 row 면 justify-content 가 가로, align-items 가 세로입니다. column 으로 바꾸면 두 축의 역할이 바뀝니다.

gap 대신 margin 을 쓰면 안 되나요?

gap 은 아이템 사이에만 간격을 넣어 양끝에 빈 여백이 생기지 않습니다. margin 으로 같은 모양을 내려면 첫·마지막 아이템을 따로 처리해야 합니다.

align-content 를 골랐는데 화면이 안 바뀝니다.

flex-wrap 이 nowrap 이면 줄이 하나뿐이라 효과가 없습니다. wrap 으로 바꿔 아이템이 줄을 넘길 때부터 적용됩니다.

🧱CSS Flexbox 레이아웃 코드 생성기

관련된 도구

CSS Grid 템플릿 코드 생성기

CSS filter 효과 코드 생성기

Flexbox 코드를 외우지 않고 만드는 법

어떤 선언이 나오는지

하지 않는 것

자주 묻는 질문

관련된 도구

CSS Grid 템플릿 코드 생성기

CSS filter 효과 코드 생성기

Flexbox 코드를 외우지 않고 만드는 법

어떤 선언이 나오는지

하지 않는 것

자주 묻는 질문

같은 카테고리 도구