CSS: 좌우, 상하, 가로세로 정렬

justify-content: 좌로 정렬 / 우로 정렬

justify-content: flex-start; 요소들을 컨테이너의 맨 왼쪽부터 정렬합니다.   
justify-content: flex-end; 요소들을 컨테이너의 맨 오른쪽부터 정렬합니다. 

justify-content: center; 요소들을 컨테이너의 왼쪽 가운데 오른쪽 중에 가운데로 정렬합니다.

justify-content: space-between; 요소들간의 간격에 동일한 간격을 둡니다.
justify-content: space-around; 각 요소의 양 옆에 동일한 간격을 둡니다.

---

align-items: 위로 정렬 / 아래로 정렬

align-items: flex-start; 요소들을 컨테이너의 맨 위부터 정렬합니다.
align-items: flex-end; 요소들을 컨테이너의 맨 밑부터 정렬합니다.
align-items: center; 요소들을 컨테이너의 위 가운데 아래 중 가운데로 정렬합니다. 

align-items: stretch; 요소들을 컨테이너에 맞도록 늘립니다.

---

flex-direction: 가로로 정렬 / 세로로 정렬 / 거꾸로 정렬

flex-direction: row; 요소들을 가로로 정렬합니다.
flex-direction: row-reverse; 요소들을 가로로, 요소들의 순서는 좌우반전시켜 정렬합니다.

flex-direction: column; 요소들을 위에서 세로로 정렬합니다.
flex-direction: column-reverse; 요소들을 세로로, 요소들의 순서는 상하반전된 상태로 정렬합니다.

! 주의사항 !   
flex의 방향이 column일 경우에는,
justify-content: flex-start & justify-content: flex-end 의 정렬 방향이 반대로,
align-items: flex-start & align-items: flex-end 의 정렬 방향이 반대로 바뀝니다!

---

flex-wrap: 줄바꿈

flex-wrap: wrap; 요소들을 여러 줄에 걸쳐 정렬 (줄 밖으로 넘치면 자동으로 밑의 줄에 적힙니다.)
flex-wrap: nowrap; 모든 요소들을 한 줄에 정렬 (줄 밖으로 넘치면 자동으로 빽빽해지거나 밖에 삐져나갑니다.)
flex-wrap: wrap-reverse; 요소들을 여러 줄에 걸쳐 반대로 정렬 (줄 넘치면 자동으로 위의 줄에 적힙니다.)

 

---

특이케이스 1. 모든 요소는 맨 위에 정렬하되, 그 요소중에 딱 한 요소(yellow)만 맨 밑에 정렬하고 싶어염

yellow를 포함한 컨테이너 {
  display: flex;
  align-items: flex-start;
}

.yellow {
align-self: flex-end;
}

그럴 땐 yellow만 align-self 를 한 다음, 밑에 정렬하라는 코드(flex-end;)를 써주면 됩니다.