[CSS: flex box] flex item의 정렬과 간격 / justify-content /align-items/ align-content

사용예시

.container {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  align-contents: center;
}

1. justify-content

: 메인 축 정렬과 아이템 사이의 간격을 제어한다.

 

justify-content:

1) flex-start [default]

2) flex-end

3) center

4) space-between

5) space-around

6) space-evenly 

 

flex-direction(메인축 설정):  row | row-reverse | column | column-reverse

 

 

 

2. align-items

: flex item의 ‘교차 축’ 정렬을 제어한다.

 

align-items:

1) flex-start

2) flex-end

3) center

4) baseline

5) stretch [default] 

 

교차축이 column이니까, 세로 축을 유심히 볼 것

 

3. align-content

: flex item의 ‘여러 줄 교차 축’ 정렬과 간격을 제어한다.

align-items와 같은 property와 "space -xxx" 속성을 갖는다.