CSS / Tutorial / Flex / align-self

align-self는 Flex 아이템 하나의 교차축 정렬을 정해 부모의 align-items보다 개별 설정을 우선 적용하는 CSS 속성입니다. 기본값 auto는 부모의 align-items에 정렬을 맡깁니다. 가로 row 배치에서는 일반적으로 세로 정렬을, 세로 column 배치에서는 가로 정렬을 조절하므로 방향을 함께 확인해야 합니다.

align-items와 align-self의 적용 대상

.container {
  display: flex;
  align-items: center;
}
.item-special {
  align-self: flex-end;
}

부모의 align-items는 아이템들의 기본 교차축 정렬을 정하고, 특정 아이템의 align-self는 그 아이템만 다른 방식으로 정렬합니다. 컨테이너의 자식이 다시 다른 요소를 감싸고 있다면 바깥 Flex 아이템에 지정해야 합니다. 깊이 들어간 자손에 지정해 바깥 형제들과의 위치가 바뀌기를 기대하면 적용 대상을 잘못 고른 것입니다.

auto를 “부모의 align-self를 상속한다”로 이해하면 안 됩니다. align-self 자체가 일반적인 상속 속성인 것은 아니며, auto의 정렬 동작이 부모의 align-items에 따르는 것입니다. 실제 값의 정의는 MDN align-self 문서에서 확인할 수 있습니다. baseline 계열은 글자의 기준선을 맞추는 용도이며 상자의 아래 테두리를 일치시키는 flex-end와 구분합니다.

전체 예제: 한 줄 안에서 다섯 정렬 비교

다음 코드를 flex-align-self.html로 저장하고 브라우저에서 엽니다. 외부 파일과 JavaScript는 필요하지 않습니다. 부모의 높이를 240px로 정해 교차축의 여유 공간을 만들고, 아이템에는 고정 height를 넣지 않아 stretch 차이도 볼 수 있게 했습니다.

<!doctype html>
<html lang="ko">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Flex align-self 비교</title>
  <style>
    body { margin: 20px; font: 16px/1.6 "Noto Sans KR", sans-serif; color: #203348; }
* { box-sizing: border-box; }
    h1 { font-size: 24px; }
    .demo { display: flex; align-items: center; gap: 8px;
      max-width: 620px; height: 240px; padding: 12px;
      border: 1px solid #7795a3; background: #edf5f7; }
    .item { flex: 1 1 0; min-width: 0; min-height: 44px; padding: 10px 4px;
      background: #176f80; color: white; font-size: 14px; text-align: center;
      overflow-wrap: anywhere; border-radius: 4px; }
    .start { align-self: flex-start; }
    .center { align-self: center; }
    .end { align-self: flex-end; }
    .stretch { align-self: stretch; }
  </style>
</head>
<body>
<h1>align-self 비교</h1>
<div class="demo">
  <div class="item auto">auto</div>
  <div class="item start">시작</div>
  <div class="item center">가운데</div>
  <div class="item end">끝</div>
  <div class="item stretch">늘림</div>
</div>
<p>부모의 align-items는 center입니다. 첫 아이템은 이를 따르고, 나머지는 각각의 align-self를 적용합니다.</p>
</body>
</html>

auto와 가운데 아이템의 세로 중심은 같습니다. 시작은 위쪽, 끝은 아래쪽에 놓이고 늘림은 부모의 안쪽 여백을 제외한 높이를 채웁니다. 이 예제는 기본 가로 쓰기와 row 방향입니다. 화면이 좁아져도 아이템이 가로 공간을 나누어 사용하도록 flex: 1 1 0과 min-width: 0을 지정했습니다.

여기서 정렬하는 대상은 아이템 상자입니다. 늘림 아이템이 세로로 길어져도 그 안의 글자를 세로 가운데 놓는 것은 별도 문제입니다. text-align: center는 글자의 가로 정렬만 정합니다. 글자까지 두 축의 가운데에 놓고 싶다면 해당 아이템 내부를 다시 display: flex로 만들고 justify-content와 align-items를 지정하는 등 내부 배치를 따로 설계하세요.

stretch가 늘어나지 않거나 center가 무시될 때

먼저 늘림 아이템에만 다음 규칙을 추가합니다. height가 auto에서 60px로 바뀌어 줄 높이를 채우지 않고 60px 높이로 표시됩니다. min-height·max-height 같은 크기 제한도 stretch의 결과를 제한할 수 있습니다. 실습 뒤에는 height 선언을 제거해 자동 높이를 복원하세요.

.stretch {
  height: 60px;
}

교차축의 자동 여백도 확인해야 합니다. 원래 예제로 되돌린 뒤 가운데 아이템에 margin-top: auto를 추가하면 위쪽 자동 여백이 남는 공간을 가져가 아이템이 아래로 갑니다. 이 경우 align-self: center가 있어도 자동 여백 처리가 우선합니다. margin-top 선언을 제거하면 가운데로 돌아옵니다.

.center {
  margin-top: auto;
}

부모의 높이를 240px에서 auto로 바꾸면 정렬할 세로 여유 공간이 줄어들 수 있습니다. 아이템 높이가 거의 같아지면 시작·가운데·끝의 차이가 보이지 않는 것이 자연스럽습니다. 실제 크기와 자동 여백의 조건은 Flexbox 명세의 교차축 정렬 규칙에서도 확인할 수 있습니다.

column과 여러 줄 배치에서의 차이

전체 예제의 style 끝에 아래 규칙을 추가하면 아이템이 세로로 이어지고 교차축은 가로가 됩니다. auto·가운데는 가로 가운데, 시작은 왼쪽, 끝은 오른쪽에 놓이며 늘림은 사용 가능한 가로 너비를 채웁니다. 세로 배치에서는 height가 주축 크기이고 width가 교차축 크기라는 점이 핵심입니다.

.demo {
  flex-direction: column;
  height: auto;
  min-height: 340px;
}
.item {
  flex: 0 0 auto;
  width: 60px;
}
.stretch {
  width: auto;
}

비교를 마친 뒤 추가한 규칙을 제거하면 가로 예제로 복원됩니다. 쓰기 방향이나 wrap-reverse까지 바꾸면 시작과 끝이 화면에서 가리키는 방향도 달라집니다. “align-self는 세로 정렬”로만 외우지 말고 flex-direction과 교차축 방향을 먼저 확인하세요.

flex-wrap으로 여러 줄이 생긴 경우 align-self는 자신의 줄 안에서 아이템을 정렬합니다. 줄 전체가 컨테이너에서 어디에 놓이는지는 align-content의 역할입니다. 아이템 하나를 바꾸려는지, 각 줄의 기본 정렬을 바꾸려는지, 줄들의 묶음을 움직이려는지 구분하면 align-self·align-items·align-content 중 무엇을 선택할지 명확해집니다.