flex의 align-self, align-item과 align-content의 차이

flex-direction이 row(default)일 때 axis 

align-self

flex로 지정된 컨테이너 안의 box에 부여한다.

align-self: flex-end이면 해당 box의 cross axis상 위치는 컨테이너 끝이 된다.

 

align-item

cross axis의 한 줄 내에서 box들의 배치를 결정한다.

align-content

cross axis의 줄 간 배치를 결정한다.

 

flex-wrap: wrap 후 align-content: center로 세로 줄 간 정렬

Box1과 Box5에 다른 height를 준 후 align-items: center