Flexbox 빌더
방향, 줄바꿈, 정렬, 간격을 설정한 뒤 항목의 크기와 순서를 편집하세요. 가로, 중앙, 카드, 세로 프리셋으로 시작할 수 있습니다。
주축은 justify-content, 교차축은 align-items입니다. align-content는 여러 줄을 제어합니다. 항목 높이가 고정되면 stretch가 크기를 바꾸지 않을 수 있습니다.
항목
실시간 미리 보기
고정 컨테이너가 화면보다 넓으면 스크롤하세요. 배경·테두리·라벨은 미리 보기 장식이며 레이아웃 CSS만 출력합니다.
사용 방법
사용 방법
- 프리셋과 컨테이너 속성·크기를 설정하세요。
- 최대 12개 항목의 grow, shrink, basis, order, align-self, 너비·높이를 편집하세요。
- 미리 보기를 확인하고 CSS를 저장하여 해당 부모·자식 클래스를 사용하세요。
컨테이너와 항목
방향 4개, 줄바꿈 3개, 주축 배치, align-items, align-content, gap을 제공합니다. grow/shrink 0–20, basis auto 또는 px/%, order −100–100 정수, align-self, 너비 0–600px, 높이 0–400px. 컨테이너 너비 100–1200px, 높이 80–600px, 간격 0–100px입니다。
축 이해하기
justify-content는 주축, align-items는 교차축입니다. align-content는 여러 줄에 적용됩니다. 고정 크기는 stretch를 막을 수 있습니다. grow/shrink/basis에 따라 실제 크기는 지정 값과 다를 수 있습니다. order는 시각 위치만 바꾸고 DOM이나 읽기 순서는 바꾸지 않습니다。
로컬 CSS 출력
미리 보기는 최소 크기 0과 border-box를 포함한 출력 값을 사용합니다. 색·테두리·라벨은 장식입니다. 컨테이너·항목 CSS만 출력하며 HTML, SCSS, Tailwind, 미디어 쿼리는 없습니다. 업로드·저장이 없고 실제 콘텐츠와 주변 CSS는 결과에 영향을 줍니다。
자주 묻는 질문
더 알아보기
align-content가 왜 그대로인가요?
여러 flex 줄을 제어합니다. wrap과 충분한 항목으로 여러 줄을 만드세요。
order가 접근성 읽기 순서를 바꾸나요?
아니요. 시각 배치만 바꿉니다. HTML 순서를 의미 있게 유지하세요。