1. 가로 세로 정렬 / flex
display: flex는 Flexbox 레이아웃을 활성화하는 CSS 속성입니다.
요소들을 가로 혹은 세로 방향으로 정렬하고, 간격/정렬/정렬 순서를 쉽게 제어할 수 있게 해줍니다.
.parent {display: flex;}
-
위 코드를 부모 요소에 적용하면, 그 자식 요소들이 Flex 항목(Flex Items)이 됩니다.
-
기본 방향은 가로 정렬(row)입니다.
🔹부모요소
| 속성명 | 설명 |
|---|---|
flex-direction | 아이템 배치 방향 설정 값: row (기본), row-reverse, column, column-reverse |
justify-content | 주 축(메인 축) 정렬 값: flex-start, flex-end, center, space-between, space-around, space-evenly |
align-items | 교차 축(수직축) 정렬 값: stretch (기본), flex-start, flex-end, center, baseline |
flex-wrap | 줄 바꿈 허용 여부 값: nowrap (기본), wrap, wrap-reverse |
align-content | 여러 줄일 때 행 간 정렬 값: stretch, flex-start, flex-end, center, space-between, space-around |
gap | 아이템 사이 간격 설정 (row-gap, column-gap 포함) |
🔹자식요소
| 속성명 | 설명 |
|---|---|
flex | flex-grow, flex-shrink, flex-basis를 축약한 속성예: flex: 1 1 auto |
flex-grow | 남는 공간을 비율로 나눔 |
flex-shrink | 공간 부족 시 줄어드는 비율 |
flex-basis | 기본 크기 지정 (width랑 비슷하지만 더 우선함) |
align-self | 개별 아이템의 수직축 정렬 부모의 align-items보다 우선 적용 |
order | 아이템 순서 변경 (기본: 0, 숫자가 작을수록 먼저) |
html
<div class="box">
<div>1</div>
<div>2</div>
<div>3</div>
</div>css
.box {
display: flex;
justify-content: space-between;
align-items: center;
}→ 결과: 3개의 박스가 가로로 나란히 정렬되고, 좌우 간격이 균등하게 배치됨.
■ 요약
-
display: flex는 정렬 문제 해결용 핵심 도구
-
부모에 선언하고, 자식의 정렬/간격을 제어함
-
복잡한 float/position 없이도 중앙 정렬, 간격 분배 가능
2. min-height-100vh
min-height는 요소가 가져야 할 최소 높이를 지정하는 속성입니다.
즉, 내용이 적더라도 최소 이만큼의 높이는 유지하라는 의미입니다.
css
.box { min-height: 200px;}
-
이 경우 .box는 아무리 내용이 없어도 최소 200px 높이를 유지합니다.
-
하지만 내용이 많아서 200px보다 커질 수는 있습니다.
3. flex-grow
flex-grow는 Flex 컨테이너 안의 아이템이 남은 공간을 얼마나 차지할지를 정하는 속성입니다.
- 기본값: 0 (남는 공간을 차지하지 않음)
- 예시 값: 1, 2, 3 등 (비율을 의미)
css
.item1 { flex-grow: 1;}
.item2 { flex-grow: 2;}
- 이 경우, .item2는 .item1보다 2배 더 많은 남는 공간을 차지합니다.
- flex-grow는 비율입니다. 전체가 1+2=3일 때, .item1은 1/3, .item2는 2/3 차지.
문제 풀기
🔗 CodePen flex 참고 사이트 (flex play ground): https://codepen.io/enxaneta/full/adLPwv
🔗 CodePen flex Froggy: https://flexboxfroggy.com/#ko
안녕하세요