CSS Flex 모델에서 개별 요소 정렬

이제 우리가 배울 속성들은 플렉스 요소들의 부모가 아니라 요소 자체에 지정됩니다. 교차 축(cross axis)을 따라 개별 블록을 정렬하는 속성인 align-self를 살펴보겠습니다.

행으로 배열된 플렉스 블록이 있다고 가정해 보겠습니다. 부모에 align-items 속성을 center 값으로 설정하여 수직으로 중앙 정렬하고, 두 번째 요소에 추가 클래스 elem를 부여한 후 해당 요소에 다른 정렬 방식을 지정합니다. 예를 들어, 요소를 상단 가장자리에 붙이도록 하겠습니다.

이를 위해 elem 클래스를 가진 요소에 align-self 속성을 flex-start 값으로 설정합니다:

html<div class="parent">
  <div class="child">1</div>
  <div class="child elem">2</div>
  <div class="child">3</div>
  <div class="child">4</div>
  <div class="child">5</div>
</div>

css.parent {
  display: flex;
  align-items: center;
  width: 300px;
  height: 200px;
  border: 1px solid red;
}
.child {
  width: 50px;
  height: 50px;
  border: 1px solid green;
}
.elem {
  align-self: flex-start;
}

Результат: