flex-direction, flex-wrap, justify-content, align-items, gap
row / center
- CSS
- .container { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: center; align-items: center; gap: 16px; }
- 주축 정렬
- center
- 교차축 정렬
- center
- 줄바꿈
- wrap
- gap
- 16px
계산 방법과 기준
CSS Flexbox는 1차원 레이아웃 모델입니다. 주축(main axis)과 교차축(cross axis)을 기준으로 아이템의 흐름과 정렬을 제어합니다.
계산식과 처리 기준
- display: flex
- main axis = flex-direction이 결정
- justify-content = main axis 정렬
- align-items = cross axis 정렬
계산 예시
가로 가운데 정렬 카드 목록 CSS는?
- flex-direction
- row
- flex-wrap
- wrap
- justify-content
- center
- align-items
- center
- gap
- 16px
결과row / center
Flexbox 컨테이너에 바로 붙여 넣을 수 있는 CSS를 생성했습니다.
세로로 쌓고 양끝 정렬하려면?
- flex-direction
- column
- flex-wrap
- nowrap
- justify-content
- space-between
- align-items
- stretch
- gap
- 8px
결과column / space-between
Flexbox 컨테이너에 바로 붙여 넣을 수 있는 CSS를 생성했습니다.
Flexbox 핵심 속성
| 속성 | 역할 | 대표 값 |
|---|---|---|
| flex-direction | 주축 방향 | row, column |
| flex-wrap | 줄바꿈 여부 | nowrap, wrap |
| justify-content | 주축 정렬 | center, space-between |
| align-items | 교차축 정렬 | stretch, center |
| gap | 아이템 간격 | px, rem 등 길이 단위 |
Flexbox 코드를 자동으로 만들어 주나요?
정렬·방향·간격 옵션을 고르면 그에 맞는 flex CSS를 생성합니다.
- flex-direction이 column이면 주축과 교차축의 체감 방향이 바뀝니다.
- justify-content는 주축 정렬, align-items는 교차축 정렬입니다.
- gap은 flex 아이템 사이 간격으로 최신 브라우저에서 안정적으로 지원됩니다.
계산 결과는 입력값과 공개된 기준을 바탕으로 한 참고용 추정치이며, 세무·법률·의료 판단을 대신하지 않습니다. 기준은 2026.09.27 검토 시점입니다. 면책 고지
계산 뒤에 있는 원리