display: flex란?요소를 한 줄 또는 여러 줄로 정렬하기 위한 CSS 레이아웃 방식이야.
기본적으로 부모 요소에 display: flex를 주고,
자식 요소들의 정렬/간격/크기 분배를 제어할 수 있어.
.parent {
display: flex;
}
<div class="parent">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
[ flex-container ]
└─ [ flex-item 1 ]
└─ [ flex-item 2 ]
└─ [ flex-item 3 ]
flex-container → 부모 (정렬 기준)flex-item → 자식 (정렬 대상)flex-container)가 조절하는 속성들| 속성 | 설명 | 기본값 |
|---|---|---|
flex-direction |
주축 방향 설정 (가로 or 세로) | row |
justify-content |
주축 정렬 (왼쪽/오른쪽/중간/간격) | flex-start |
align-items |
교차축 정렬 (세로 기준 정렬) | stretch |
flex-wrap |
줄바꿈 허용 여부 | nowrap |
gap |
아이템 간 간격 | 0 (IE 미지원) |
flex-item)이 조절하는 속성들| 속성 | 설명 |
|---|---|
flex-grow |
남은 공간을 얼마나 키울지 |
flex-shrink |
공간 줄어들 때 얼마나 줄일지 |
flex-basis |
기본 크기 |
flex |
위 3개를 한 줄로 축약 (flex: 1 0 0% 등) |
align-self |
개별 정렬 지정 |