Use direction to choose the main axis for your items.
로컬 CSS Flexbox 생성기
눈으로 확인하며 Flexbox를 만드세요
방향·줄바꿈·정렬·간격을 선택하고 결과를 미리 본 뒤 인터페이스에 쓸 CSS를 복사하세요.
* 모든 처리는 브라우저에서 진행됩니다. 레이아웃 데이터는 업로드되지 않습니다.
CSS 준비 완료
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
gap: 16px;123456
QUICK GUIDE
Flexbox 두 축을 이해하세요
Use justify-content to distribute items along the main axis.
Use align-items to position items on the cross axis.
Turn wrapping on when items should move onto more lines as space gets tight.
FAQ
Flexbox questions
What is the main axis?
The main axis follows flex-direction. In a row it runs horizontally; in a column it runs vertically.
Why does align-items change with direction?
Align-items works on the cross axis, which is perpendicular to the selected main axis.
When should I use Grid instead?
Use Grid when you need explicit rows and columns together. Use Flexbox for one-dimensional groups and alignment.