Flexbox & Grid
align-items
플렉스 박스와 그리드 아이템을 컨테이너의 교차 축(cross axis)을 따라 정렬하는 유틸리티입니다.
| Class | Styles |
|---|---|
items-start | align-items: flex-start; |
items-end | align-items: flex-end; |
items-center | align-items: center; |
items-baseline | align-items: baseline; |
items-stretch | align-items: stretch; |
예제
스트레치
컨테이너의 교차 축을 채우도록 아이템을 늘리려면 items-stretch를 사용하세요:
01
02
03
<div class="flex items-stretch ..."> <div class="py-4">01</div> <div class="py-12">02</div> <div class="py-8">03</div></div>Start
items-start를 사용하면 컨테이너의 교차 축(cross axis) 시작점에 아이템을 정렬할 수 있습니다:
01
02
03
<div class="flex items-start ..."> <div class="py-4">01</div> <div class="py-12">02</div> <div class="py-8">03</div></div>Center
컨테이너의 교차 축(cross axis)을 기준으로 아이템을 가운데 정렬하려면 items-center를 사용하세요:
01
02
03
<div class="flex items-center ..."> <div class="py-4">01</div> <div class="py-12">02</div> <div class="py-8">03</div></div>End
컨테이너의 교차 축(cross axis) 끝에 아이템을 정렬하려면 items-end를 사용하세요:
01
02
03
<div class="flex items-end ..."> <div class="py-4">01</div> <div class="py-12">02</div> <div class="py-8">03</div></div>Baseline
items-baseline을 사용하면 컨테이너의 교차 축(cross axis)을 따라 아이템들을 정렬하여 모든 아이템의 기준선(baseline)이 일치하도록 할 수 있습니다.
01
02
03
<div class="flex items-baseline ..."> <div class="pt-2 pb-6">01</div> <div class="pt-8 pb-12">02</div> <div class="pt-12 pb-4">03</div></div>반응형 디자인
접두사 an align-items 유틸리티 를 md:와 같은 브레이크포인트 변형과 함께 사용하면 medium 화면 크기 이상에서만 유틸리티가 적용됩니다:
<div class="flex items-stretch md:items-center ..."> <!-- ... --></div>변형 사용에 대해 더 알아보려면 변형 문서를 참고하세요.
