CSS Flexbox 생성기
flex-direction, justify-content, align-items, gap을 선택해 CSS Flexbox container 선언을 생성합니다.
사용 방법
- direction·justify·align·gap을 선택합니다.
핵심 기능과 처리 범위
direction은 row 계열·column 계열, justify와 align은 UI에 제공된 대표값 중 선택하고 preview item 정렬을 즉시 보여줍니다.
처리 원리
display:flex과 네 control 값을 CSS declaration으로 결합합니다.
예시
row + space-between + center + 16px gap으로 가로 분산 layout을 만들 수 있습니다.
이럴 때 유용합니다
- navigation·toolbar 같은 1차원 layout scaffold를 빠르게 만들 때
사용 전 참고
- flex-wrap, order, grow/shrink/basis 같은 item-level 속성은 현재 생성하지 않습니다.
자주 묻는 질문
wrap도 설정할 수 있나요?
아닙니다. 현재 generator는 direction·justify·align·gap 중심입니다.