🥝 align-self

• 교차축에서 개별 Item의 정렬 방법을 설정
• align-items는 Container 내 모든 Items의 정렬방법을 설정하고,
  align-self는 필요에 의해 일부 Item만 정렬방법을 변경하려고 할 때 사용한다.
• align-items 속성보다 우선한다.

auto
Container의 align-items 속성을 상속받음 (기본값 : auto)

stretch
Container의 교차 축을 채우기 위해 Item을 늘림

flex-start
Item을 각 줄의 시작점(flex-start)으로 정렬

flex-end
Item을 각 줄의 끝점(flex-end)으로 정렬

center
Item을 가운데 정렬

baseline
Item을 문자 기준선에 정렬

.container {
  height: 400px;
  border: 4px solid;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
}
.container .item {
  width: 100px;
  height: 100px;
  background: coral;
  border: 4px dotted brown;
  border-radius: 10px;
}
.container .item2 {
  align-self: center;
}
.container .item4 {
  align-self: flex-start;
}
.container .item7 {
  align-self: stretch; /*높이값이 있기때문에 늘어나지 않음*/
  height: auto; /*기본값을 주면 늘어남*/
}