Justify Self

Justify Self

그리드 안의 개별 항목 하나를 인라인 축 기준으로 어떻게 정렬할지 정해주는 유틸리티예요. 컨테이너 전체가 아닌 해당 항목에만 적용돼요.

출처: 문서

본문

ClassStyles

Class Properties
justify-self-auto justify-self: auto;
justify-self-start justify-self: start;
justify-self-center justify-self: center;
justify-self-center-safe justify-self: safe center;
justify-self-end justify-self: end;
justify-self-end-safe justify-self: safe end;
justify-self-stretch justify-self: stretch;

예시 (Examples)

자동 (Auto)

justify-self-auto 유틸리티를 사용하면 grid의 justify-items 속성 값에 따라 항목을 정렬해요.

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

시작 (Start)

justify-self-start 유틸리티를 사용하면 grid 항목을 인라인 축의 시작 부분에 정렬해요.

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

중앙 (Center)

justify-self-center 또는 justify-self-center-safe 유틸리티를 사용하면 grid 항목을 인라인 축의 중앙에 정렬해요.

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

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

공간이 충분하지 않을 때 justify-self-center-safe 유틸리티는 중앙 대신 컨테이너의 시작 부분에 항목을 정렬해요.

끝 (End)

justify-self-end 또는 justify-self-end-safe 유틸리티를 사용하면 grid 항목을 인라인 축의 끝 부분에 정렬해요.

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

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

공간이 충분하지 않을 때 justify-self-end-safe 유틸리티는 끝 대신 컨테이너의 시작 부분에 항목을 정렬해요.

늘이기 (Stretch)

justify-self-stretch 유틸리티를 사용하면 grid 항목을 인라인 축의 그리드 영역을 채우도록 늘려요.

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

반응형 디자인 (Responsive design)

justify-self 유틸리티 앞에 md: 같은 브레이크포인트 변형을 붙이면 중간 크기 화면 이상에서만 유틸리티가 적용되게 만들 수 있어요.

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

변형(variant) 사용법에 대해 더 알아보려면 variants 문서를 확인해 보세요.

더 알아보기 (Learn more)