● align-items, align-content, align-self 속성
align-items 속성은 플렉스 아이템을 교차축 방향으로 정렬할 때 사용합니다.
형식
align-items:<속성값>;
사용할 수 있는 속성값은 다음 표와 같습니다.
표 7-4 align-items의 속성값
|
속성값 |
설명 |
|
stretch |
교차축 방향으로 플렉스 아이템의 너비나 높이가 늘어납니다. |
|
flex-start |
교차축 방향의 시작을 기준으로 정렬합니다. |
|
flex-end |
교차축 방향의 끝을 기준으로 정렬합니다. |
|
center |
교차축 방향의 중앙을 기준으로 정렬합니다. |
|
baseline |
플렉스 아이템의 baseline을 기준으로 정렬합니다. |
플렉스 박스 레이아웃은 기본으로 align-items 속성에 stretch 값이 적용되어 있습니다. 그래서 단순하게 display 속성에 flex나 inline-flex 값만 적용해도 플렉스 아이템이 플렉스 컨테이너의 높이만큼 가득 차게 늘어납니다.
align-items 속성의 각 값이 어떻게 적용되는지 다음 코드의 실행결과에서 확인할 수 있습니다.
07/01/align-items.html
.flex-container{
display:flex;
align-items:stretch; /* flex-start, flex-end, center, baseline */
}