8.1 align-items 속성
align-items와 align-self 속성은 Flex 요소들을 교차 축으로 정렬할 수 있게 하고, 레이아웃에서 유연성과 정확성을 제공합니다.
align-items 속성은 Flex 컨테이너 안에서 Flex 요소들을 주 축과 수직을 이루는 교차 축으로 정렬합니다. 교차 축은 flex-direction 속성 값에 따라 다릅니다:
flex-direction값이row또는row-reverse인 경우, 교차 축은 수직입니다.flex-direction값이column또는column-reverse인 경우, 교차 축은 수평입니다.
값:
stretch: 요소들이 컨테이너를 채우기 위해 늘어납니다 (기본값)flex-start: 요소들이 컨테이너의 시작 부분에 정렬됩니다flex-end: 요소들이 컨테이너의 끝 부분에 정렬됩니다center: 요소들이 컨테이너의 중앙에 정렬됩니다baseline: 요소들이 텍스트의 기준선에 정렬됩니다
사용 예시:
CSS
.container {
display: flex;
height: 200px;
border: 2px solid #000;
padding: 10px;
margin-bottom: 20px;
}
.item {
background-color: #3498db;
color: white;
padding: 10px;
margin: 5px;
}
.align-stretch {
align-items: stretch;
}
.align-flex-start {
align-items: flex-start;
}
HTML
<div class="container align-stretch">
<div class="item">요소 1</div>
<div class="item">요소 2</div>
<div class="item">요소 3</div>
</div>
<div class="container align-flex-start">
<div class="item">요소 1</div>
<div class="item">요소 2</div>
<div class="item">요소 3</div>
</div>
8.2 align-self 속성
align-self 속성은 특정 Flex 요소에 대해 align-items 값을 재정의할 수 있게 해줍니다. 이 속성은 직접 Flex 요소에 적용되어 Flex 컨테이너 안에서 교차 축으로 정렬을 제어합니다.
값:
auto: 부모로부터 값을 상속받음 (기본값)stretch: 요소가 컨테이너를 채우기 위해 늘어납니다flex-start: 요소가 컨테이너의 시작 부분에 정렬됩니다flex-end: 요소가 컨테이너의 끝 부분에 정렬됩니다center: 요소가 컨테이너의 중앙에 정렬됩니다baseline: 요소가 텍스트의 기준선에 정렬됩니다
사용 예시:
CSS
.container {
display: flex;
height: 200px;
border: 2px solid #000;
padding: 10px;
margin-bottom: 20px;
align-items: flex-start;
}
.item {
background-color: #3498db;
color: white;
padding: 10px;
margin: 5px;
}
.self-flex-end {
align-self: flex-end;
}
.self-center {
align-self: center;
}
.self-baseline {
align-self: baseline;
}
HTML
<div class="container">
<div class="item self-flex-end">요소 3</div>
<div class="item self-center">요소 4</div>
<div class="item self-baseline">요소 5</div>
</div>
코드 설명:
.self-flex-end: 이 요소는 컨테이너의 하단에 정렬됩니다.self-center: 이 요소는 수직 중앙에 정렬됩니다.self-baseline: 이 요소는 텍스트의 기준선에 맞추어 정렬됩니다
8.3 요소 중심 정렬
Flexbox는 justify-content와 align-items 또는 align-self의 조합을 사용하여 요소들을 수평 및 수직으로 쉽게 중앙에 맞출 수 있습니다.
사용 예시:
CSS
.center-container {
display: flex;
justify-content: center; /* 수평 중심 정렬 */
align-items: center; /* 수직 중심 정렬 */
height: 300px;
border: 2px solid #000;
}
.center-item {
background-color: #3498db;
color: white;
padding: 20px;
}
HTML
<div class="center-container">
<div class="center-item">중앙 정렬된 요소</div>
</div>
코드 설명:
-
.center-container:justify-content: center;로 수평으로,align-items: center;로 수직으로 요소들이 중앙 정렬된 Flex 컨테이너 .center-item: 컨테이너의 중앙에 정렬된 Flex 요소
GO TO FULL VERSION