AAtomic CSS

align-self

부모의 align-items 값을 개별 flex 아이템에서 재정의합니다. 컨테이너가 아닌 자식 요소에 적용하며, 특정 아이템만 다른 정렬이 필요할 때 사용합니다.

클래스 목록

클래스CSS설명
asaalign-self: auto부모의 align-items 값을 상속 (기본값)
assalign-self: stretch교차축 방향으로 컨테이너 높이만큼 늘림
asfsalign-self: flex-start교차축 시작 지점(상단)에 정렬
asfealign-self: flex-end교차축 끝 지점(하단)에 정렬
ascalign-self: center교차축 기준 가운데 정렬
asbalign-self: baseline텍스트 기준선에 맞춰 정렬

시각적 비교

부모에 aic(align-items: center)가 적용된 flex 컨테이너에서, 두 번째 아이템만 align-self를 변경한 결과입니다.

auto (부모 aic 상속) — asa

Item 1Item 2Item 3

부모의 align-items: center를 그대로 따름 — 기본값과 동일

stretch — ass

Item 1Item 2Item 3

Item 2만 컨테이너 전체 높이로 늘어남

flex-start — asfs

Item 1Item 2Item 3

Item 2만 상단에 정렬됨 (부모 aic 무시)

flex-end — asfe

Item 1Item 2Item 3

Item 2만 하단에 정렬됨 (부모 aic 무시)

center — asc

Item 1Item 2Item 3

Item 2가 가운데 정렬됨 — 부모 aic와 동일하지만 명시적 지정

baseline — asb

Item 1Item 2Item 3

Item 2가 텍스트 기준선에 맞춰 정렬됨

클래스별 상세

asaalign-self: auto

부모의 align-items 값을 그대로 상속합니다. 기본값이므로 명시적으로 사용하는 경우는 드물지만, 다른 align-self를 반응형이나 의사 클래스에서 초기화할 때 유용합니다.

<!-- 반응형에서 align-self 초기화 -->
<div class="df aic h12rem">
  <span class="asfs sm-asa">모바일에서는 부모 정렬 따름</span>
  <span>기본 아이템</span>
</div>

assalign-self: stretch

해당 아이템을 교차축 방향으로 컨테이너 높이만큼 늘립니다. 부모가 aic로 설정되어 있어도, 이 아이템만 전체 높이를 차지하게 됩니다.

<!-- 사이드바만 전체 높이 차지 -->
<div class="df aic gap16px h20rem">
  <aside class="ass bg18181B p16px br4px">
    전체 높이 사이드바
  </aside>
  <main class="p16px">가운데 정렬된 메인 콘텐츠</main>
  <nav class="p16px">가운데 정렬된 네비게이션</nav>
</div>

asfsalign-self: flex-start

해당 아이템을 교차축의 시작 지점(상단)에 정렬합니다. 부모가 aic나 aife로 설정되어 있어도, 이 아이템만 상단에 고정됩니다.

<!-- 헤더의 로고만 상단 고정 -->
<header class="df aic gap16px h8rem">
  <img class="asfs" src="/logo.svg" alt="Logo" />
  <nav>메뉴 (가운데 정렬)</nav>
  <button>CTA (가운데 정렬)</button>
</header>

asfealign-self: flex-end

해당 아이템을 교차축의 끝 지점(하단)에 정렬합니다. 부모가 aic로 설정되어 있어도, 이 아이템만 하단에 고정됩니다.

<!-- 카드 하단에 버튼 고정 -->
<div class="df aic gap16px h12rem">
  <span>일반 아이템</span>
  <button class="asfe bg6366F1 cFFFFFF py8px px16px br4px bn cp">
    하단 고정 버튼
  </button>
  <span>일반 아이템</span>
</div>

ascalign-self: center

해당 아이템을 교차축 기준으로 가운데 정렬합니다. 부모가 aifs나 ass로 설정되어 있어도, 이 아이템만 세로 가운데에 배치됩니다.

<!-- stretch 부모에서 특정 아이템만 가운데 -->
<div class="df ais gap16px h12rem">
  <span class="bg18181B p16px br4px">전체 높이 (stretch)</span>
  <span class="asc bg34D399 c000000 p16px br4px">가운데 정렬</span>
  <span class="bg18181B p16px br4px">전체 높이 (stretch)</span>
</div>

asbalign-self: baseline

해당 아이템을 텍스트 기준선(baseline)에 맞춰 정렬합니다. 서로 다른 크기의 텍스트를 포함한 아이템들이 텍스트 기준선으로 정렬되어야 할 때 유용합니다.

<!-- 다른 크기 텍스트의 기준선 정렬 -->
<div class="df aifs gap16px h12rem">
  <span class="asb fs2-4rem">큰 텍스트</span>
  <span class="asb fs14px">작은 텍스트</span>
  <span class="asb fs16px">중간 텍스트</span>
</div>

팁 & 주의사항

자식 요소에 적용

align-self는 flex/grid 컨테이너가 아닌 자식 아이템에 적용합니다. 부모에 적용하면 효과가 없습니다.

align-items를 재정의

부모의 align-items 값을 개별 아이템에서 덮어씁니다. 예를 들어 부모가 aic여도 자식에 asfs를 주면 해당 아이템만 상단 정렬됩니다.

"하나만 특별하게" 패턴

대부분의 아이템은 align-items로 일괄 정렬하고, 예외적인 아이템만 align-self로 개별 제어하세요. 모든 아이템에 align-self를 쓰는 것은 비효율적입니다.

Grid에서도 동작

align-self는 flex뿐 아니라 grid 컨테이너 안에서도 동일하게 동작합니다. grid 아이템의 세로 정렬을 개별 제어할 때도 사용할 수 있습니다.

align-itemsalign-contentjustify-selfflex-direction