도구 실행
CSS Flexbox 생성기는 웹 레이아웃 구성에 필요한 CSS 코드를 간편하게 만들어 주는 도구입니다. 배치 방향(direction), 가로 정렬(justify), 세로 정렬(align), 줄 바꿈(wrap), 요소 간격(gap)을 직접 지정하여 레이아웃 코드를 구성할 수 있습니다. 각 설정 항목에 값을 지정하지 않으면 기본값인 가로 방향, 중앙 정렬, 줄 바꿈 없음, 10px 간격이 적용됩니다. 생성된 코드 영역에는 display: flex 선언과 입력한 속성들이 즉시 표시되어 스타일시트에 손쉽게 복사해 활용할 수 있습니다.
사용 방법
- 배치 방향(Direction)에 row, column 등의 flex-direction 값을 입력합니다.
- 주축 정렬(Justify)에 center, flex-start, space-between 등의 justify-content 값을 입력합니다.
- 교차축 정렬(Align)에 center, flex-start, stretch 등의 align-items 값을 입력합니다.
- 줄 바꿈 여부(Wrap)에 nowrap, wrap 등의 flex-wrap 값을 입력합니다.
- 요소 사이의 간격(Gap)에 원하는 픽셀 단위 숫자를 입력합니다.
- 생성 버튼을 눌러 결과 영역에 출력된 CSS Flexbox 코드를 확인하고 복사합니다.
예시
- 수평 중앙 정렬 레이아웃: 방향 row, 주축 정렬 center, 교차축 정렬 center, 줄 바꿈 nowrap, 간격 16을 입력하여 중앙 정렬 CSS를 생성합니다.
- 반응형 카드 그리드 레이아웃: 방향 row, 주축 정렬 space-between, 교차축 정렬 flex-start, 줄 바꿈 wrap, 간격 24를 입력하여 다단 레이아웃 코드를 생성합니다.
자주 묻는 질문
간격(gap) 값에는 어떤 단위가 적용되나요?
입력한 숫자에 픽셀(px) 단위가 자동으로 붙어 gap 속성으로 생성됩니다.
입력란을 비워두면 어떻게 처리되나요?
값을 입력하지 않으면 기본값으로 row 방향, center 정렬, nowrap 줄 바꿈, 10px 간격이 적용됩니다.
생성된 코드를 실제 웹 프로젝트에서 바로 사용할 수 있나요?
생성된 CSS 코드를 복사하여 대상 컨테이너 클래스의 스타일 정의에 붙여넣어 활용할 수 있습니다.