align-content 속성도 플렉스 아이템을 교차축 방향으로 정렬할 때 사용합니다. 그러나 align-items 속성과 다르게 플렉스 아이템이 flex-wrap 속성 때문에 두 줄 이상이 됐을 때만 사용합니다.
07/01/align-content.html
.flex-container{
display:flex;
flex-wrap:wrap;
align-content:center;
}
또한, align-items 속성으로 플렉스 아이템을 한 번에 정렬하지 않고 각각 정렬하고 싶을 때는 align-self 속성을 사용하면 됩니다.
07/01/align-self.html
.flex-container{
display:flex;
}
.flex-item:nth-child(1){
align-self:flex-start;
}
.flex-item:nth-child(2){
align-self:flex-end;
}
.flex-item:nth-child(3){
align-self:center;
}
.flex-item:nth-child(4){
align-self:baseline;
}
수코딩의 조언
플렉스 박스 레이아웃 속성은 책에 소개한 속성 말고도 flex-basis, flex-grow, flex-shrink 속성이 있지만, 자주 사용하지 않습니다. 나머지 속성도 궁금하다면 MDN 사이트(https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Flexbox)를 참고하기 바랍니다.