justify-self

개별 그리드 아이템이 인라인 축을 따라 정렬되는 방식을 제어하는 유틸리티입니다.

Class Styles

justify-self-auto

justify-self: auto;

justify-self-start

justify-self: start;

justify-self-end

justify-self: end;

justify-self-center

justify-self: center;

justify-self-stretch

justify-self: stretch;

예제

justify-self-auto를 사용하여 그리드의 justify-items 속성 값에 따라 아이템을 정렬할 수 있습니다:

<div class="grid justify-items-stretch ...">  <!-- ... -->  <div class="justify-self-auto ...">02</div>  <!-- ... --></div>

justify-self-start를 사용하여 그리드 아이템을 인라인 축의 시작 부분에 정렬할 수 있습니다:

<div class="grid justify-items-stretch ...">  <!-- ... -->  <div class="justify-self-start ...">02</div>  <!-- ... --></div>

그리드 아이템을 인라인 축을 기준으로 중앙에 정렬하려면 justify-self-center를 사용하세요:

<div class="grid justify-items-stretch ...">  <!-- ... -->  <div class="justify-self-center ...">02</div>  <!-- ... --></div>

justify-self-end를 사용하여 그리드 아이템을 인라인 축의 끝으로 정렬할 수 있습니다:

<div class="grid justify-items-stretch ...">  <!-- ... -->  <div class="justify-self-end ...">02</div>  <!-- ... --></div>

justify-self-stretch를 사용하여 그리드 아이템을 인라인 축 방향으로 그리드 영역에 꽉 차게 늘릴 수 있습니다.

<div class="grid justify-items-start ...">  <!-- ... -->  <div class="justify-self-stretch ...">02</div>  <!-- ... --></div>

접두사 a justify-self 유틸리티 를 md:와 같은 브레이크포인트 변형과 함께 사용하면 medium 화면 크기 이상에서만 유틸리티가 적용됩니다:

<div class="justify-self-start md:justify-self-end ...">  <!-- ... --></div>

변형 사용에 대해 더 알아보려면 변형 문서를 참고하세요.