Flexbox & Grid
align-self
플렉스 박스나 그리드 아이템이 컨테이너의 교차 축(cross axis)을 따라 어떻게 위치할지 제어하는 유틸리티입니다.
| Class | Styles |
|---|---|
self-auto | align-self: auto; |
self-start | align-self: flex-start; |
self-end | align-self: flex-end; |
self-center | align-self: center; |
self-stretch | align-self: stretch; |
self-baseline | align-self: baseline; |
예제
자동 정렬
self-auto를 사용하면 컨테이너의 align-items 속성 값에 따라 아이템을 정렬할 수 있습니다.
01
02
03
<div class="flex items-stretch ..."> <div>01</div> <div class="self-auto ...">02</div> <div>03</div></div>Start
컨테이너의 align-items 값과 상관없이, 아이템을 컨테이너의 교차 축(cross axis) 시작점에 정렬하려면 self-start를 사용하세요:
01
02
03
<div class="flex items-stretch ..."> <div>01</div> <div class="self-start ...">02</div> <div>03</div></div>Center
컨테이너의 align-items 값과 상관없이, self-center를 사용해 아이템을 컨테이너의 교차 축(cross axis) 중심에 정렬할 수 있습니다.
01
02
03
<div class="flex items-stretch ..."> <div>01</div> <div class="self-center ...">02</div> <div>03</div></div>End
컨테이너의 align-items 값과 상관없이, 아이템을 컨테이너의 교차 축(cross axis) 끝에 정렬하려면 self-end를 사용하세요:
01
02
03
<div class="flex items-stretch ..."> <div>01</div> <div class="self-end ...">02</div> <div>03</div></div>Stretch
컨테이너의 align-items 값과 상관없이, self-stretch를 사용해 아이템을 컨테이너의 교차 축(cross axis)에 맞춰 늘릴 수 있습니다.
01
02
03
<div class="flex items-stretch ..."> <div>01</div> <div class="self-stretch ...">02</div> <div>03</div></div>반응형 디자인
접두사 an align-self 유틸리티 를 md:와 같은 브레이크포인트 변형과 함께 사용하면 medium 화면 크기 이상에서만 유틸리티가 적용됩니다:
<div class="self-auto md:self-end ..."> <!-- ... --></div>변형 사용에 대해 더 알아보려면 변형 문서를 참고하세요.
