플렉스박스 생성기

일반적인 패턴을 위한 프리셋을 사용하거나 각 속성을 직접 조정하세요. 입력값은 유효하지 않은 CSS나 빈 상태 렌더링 오류를 방지하기 위해 안전한 범위로 제한됩니다.

미리보기 아이템을 클릭하여 개별적으로 편집하세요. 아이템별 값도 코드 생성 전에 검증됩니다.

플렉스 증가 (Flex grow)

0 1

플렉스 축소 (Flex shrink)

0 1

플렉스 기본 크기 (Flex basis) 픽셀 단위. 콘텐츠 크기에 맞추려면 0을 사용하세요.

개별 정렬 (Align self) 이 아이템에 대해 컨테이너 정렬 설정을 무시합니다.

실시간 미리보기

아래 컨테이너는 즉시 업데이트됩니다. 레이블은 어떤 축이 메인 방향인지 요약하여 CSS와 시각적 결과를 연결해 줍니다.

메인축: 수평. 교차축: 수직.

CSS에는 도구에 표시된 속성만 포함됩니다. HTML 레이블은 시맨틱 클래스 이름을 사용하여 실제 컴포넌트에 쉽게 적용할 수 있습니다.

플렉스박스는 플렉스 컨테이너의 직접적인 자식들을 메인축과 교차축을 가로질러 배치합니다. 아래 가이드는 기초적인 내용을 전문 용어에 파묻히지 않고 설명합니다.

row는 메인축을 수평으로 만듭니다. column은 수직으로 만듭니다. 이 설정이 바뀌면 justify-content와 align-items는 화면 방향이 아닌 축 논리를 따르기 때문에 역할이 바뀐 것처럼 보입니다.

flex-wrap이 nowrap인 경우 align-content는 시각적 효과가 없습니다. 이는 아이템이 여러 행을 형성하고 그 행들 사이에 여유 공간이 있을 때만 중요합니다.

flex-grow는 남은 공간을 공유하는 방법을, flex-shrink는 아이템이 압축되는 방식을, flex-basis는 협상이 시작되기 전의 시작 크기를 제어합니다.

가정: 생성된 basis 값은 픽셀을 사용하고, 간격은 정수 픽셀을 사용하며, 미리보기는 현대적인 브라우저 동작을 반영합니다. 가독성을 위해 반올림은 정수 픽셀 값으로 제한됩니다.

생성기에서 레이아웃을 테스트한 후 빠른 조회를 위해 이것을 사용하세요.

메인축을 따라 아이템을 이동시킵니다. 내비게이션 바, 버튼 그룹, 분산된 행에 적합합니다.

모든 아이템의 교차축 정렬을 한 번에 제어합니다. 카드 높이나 인라인 콘텐츠가 고르지 않을 때 사용하세요.

나머지 그룹을 변경하지 않고 한 아이템의 교차축 정렬만 무시하고 개별적으로 설정합니다.