CSS

justify-content

• Flex 요소들을 가로선 상에서 정렬합니다.
  + flex-start: 요소들을 컨테이너의 앞쪽부터 정렬합니다.
  + flex-end: 요소들을 컨테이너의 뒤쪽에서부터 정렬합니다.
  + center: 요소들을 컨테이너의 가운데에서부터 정렬합니다.
  + space-between: 요소들 사이에만 동일한 간격을 둡니다.
  + space-around: 요소들 주위(앞, 뒤), 요소들 사이에도 동일한 간격을 둡니다.
  

align-items

• Flex 요소들을 세로선 상에서 정렬합니다.
  + flex-start: 요소들을 컨테이너의 위쪽에 정렬합니다.
  + flex-end: 요소들을 컨테이너의 아래쪽에 정렬합니다.
  + center: 요소들을 컨테이너의 세로선 상의 가운데로 정렬합니다.
  + baseline: 요소들을 컨테이너의 시작 위치에 정렬합니다.
  + stretch: 요소들을 컨테이너에 맞도록 늘립니다.

align-content

• Flex 컨테이너 사이의 간격을 조절합니다.

  	+ flex-start: 여러 줄들을 컨테이너의 꼭대기에 정렬합니다.
  	+ flex-end: 여러 줄들을 컨테이너의 바닥에 정렬합니다.
  	+ center: 여러 줄들을 세로선 상의 가운데에 정렬합니다.
  	+ space-between: 여러 줄들 사이에 동일한 간격을 둡니다.
  	+ space-around: 여러 줄들 주위에 동일한 간격을 둡니다.
  	+ stretch: 여러 줄들을 컨테이너에 맞도록 늘립니다.

flex-direction

• Flex 요소들을 정렬할 방향을 지정합니다.

• column-reverse 또는 row-reverse를 사용하면 요소들의 start와 end의 순서도 뒤바뀝니다.

• Flex의 방향이 column일 경우 justify-content의 방향이 세로로, align-items의 뱡향이 가로로 바뀝니다.

  	+ row: 요소들을 텍스트의 방향과 동일하게 정렬합니다.
  	+ row-reverse: 요소들을 텍스트의 반대 방향으로 정렬합니다.
  	+ column: 요소들을 위에서 아래로 정렬합니다.
  	+ column-reverse: 요소들을 아래에서 위로 정렬합니다.

flex-wrap

• Flex 요소들을 한 줄 또는 여러 줄에 걸쳐 정렬합니다.

  	+ nowrap: 모든 요소들을 한 줄에 정렬합니다.
  	+ wrap: 요소들을 여러 줄에 걸쳐 정렬합니다.
  	+ wrap-reverse: 요소들을 여러 줄에 걸쳐 반대로 정렬합니다.

flex-row

• flex-direction + flex-wrap

align-self

• 지정된 align-items 값을 무시하고, 개별 Flex 요소를 세로선 상에서 정렬합니다.
  + flex-start: 요소들을 컨테이너의 위쪽에 정렬합니다.
  + flex-end: 요소들을 컨테이너의 아래쪽에 정렬합니다.
  + center: 요소들을 컨테이너의 세로선 상의 가운데로 정렬합니다.
  + baseline: 요소들을 컨테이너의 시작 위치에 정렬합니다.
  + stretch: 요소들을 컨테이너에 맞도록 늘립니다.

order

• Flex 요소들의 순서를 지정합니다.

  	+ 0 : 기본값이며, 현재 위치

  • (양수) : 우측 방향
  • (음수) : 좌측 방향