justify-content 항목 정렬

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

 

.jc1 {
        display: flex;
        justify-content: flex-start; / 기본값.
}
.jc2 {
        display: flex;
        justify-content: center; / 아이템을 가운데 정렬
}
.jc3 {
        display: flex;
        justify-content: flex-end; / 오른쪽 정렬
}
.jc4 {
        display: flex;
        justify-content: space-around; / 아이템 공간 똑같이. margin이랑 비슷
}
.jc5 {
        display: flex;
        justify-content: space-between; / 아이템 사이 공간 똑같이
}