align-items : flex 아이템의 세로 정렬 정의

See the Pen align-items by nilgi (@nilgi) on CodePen.

 

.ai1 {
        display: flex;
        align-items: flex-start; / 아이템 세로 정렬 위에
}

.ai2 {
        display: flex;
        align-items: center; / 중앙
}

.ai3 {
        display: flex;
        align-items: flex-end; / 아래
}

 

.ai4 {
        display: flex;
        align-items: stretch; / 아이템을 컨테이너 높이만큼 늘림
}

.ai5 {
        display: flex;
        align-items: baseline; / 아이템의 중앙을 기준으로 나열
}