align-content

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

 

.ac1 {
        display: flex;
        flex-wrap: wrap;
        align-content: space-between; / 세로 기준 양 끝에 배치
}

.ac2 {
        display: flex;
        flex-wrap: wrap;
        align-content: space-around; / 세로 기준 아이템에 똑같은 공간
}

.ac3 {
        display: flex;
        flex-wrap: wrap;
        align-content: stretch; / 컨테이너 크기에 맞게 늘려서 배치
}

.ac4 {
        display: flex;
        flex-wrap: wrap;
        align-content: center; / 세로 기준 중앙에
}

.ac5 {
        display: flex;
        flex-wrap: wrap;
        align-content: flex-start; / 세로 기준 위에서부터
}

.ac6 {
        display: flex;
        flex-wrap: wrap;
        align-content: flex-end; /세로 기준 아래에서부터
}