design
무료
회원가입 불필요
QR 코드 생성기
Flexbox 속성을 시각적으로 구성하고 생성된 CSS를 즉시 얻으세요.
도구를 불러오는 중…
이 도구에 대해
모든 Flexbox 컨테이너 속성을 조정하세요 — flex-direction, flex-wrap, justify-content, align-items, align-content 및 gap — 그리고 5개의 색상 박스가 실시간으로 반응하는 라이브 미리보기를 확인하세요. 개별 박스를 클릭하여 자체 flex-grow, flex-shrink, flex-basis, align-self 및 order를 조정한 후 한 번의 클릭으로 완성된 CSS를 복사하세요.
사용 방법
- 1 1단계: 왼쪽의 컨테이너 패널을 사용하여 방향, 줄 바꿈 및 정렬 속성을 설정하세요.
- 2 2단계: 각 속성을 변경할 때 미리보기의 색상 박스가 실시간으로 업데이트되는 것을 보세요.
- 3 3단계: 개별 박스를 클릭하여 선택하고 항목 패널에서 자체 flex 속성을 조정하세요.
- 4 4단계: 컨테이너, 선택한 항목 또는 모든 항목에 대해 생성된 CSS를 한 번에 복사하세요.