개구리 게임

flex-direction

• 컨테이너 안의 요소들의 정렬 방향을 지정한다.

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

order

• 양수 음수 0이 존재하고
  default값은 0이다. 제위치
  양수는 제일 뒤로
  음수를 제일 앞으로 보낸다.

align-self

• 개별 요소에 적용할 수 있다.

#pond {
  display: flex;
  align-items: flex-start;
}

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

• 이런식으로 클래스 별 지정할 수 있다.

flex-wrap

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

• 보통 display: flex하면 개짜부되는데 이를 위 값을 이용해서 펼쳐줄 수 있다.

flex-flow

• flex-direction과 flex-wrap이 자주 같이 사용되기 때문에
  공백을 두고 순서대로 flex-direction과 flex-wrap의 enum 타입중 2개의 값을 입력받는다.

align-content

• align-item은 컨테이너를 욺직인다면
  align-content는 컨테이너 내부의 값을 이동하는 것이다.

ps. 개구리게임 24번 정답

#pond {
  display: flex;
  flex-direction: column-reverse;
  flex-wrap: wrap-reverse;
  justify-content: center;
  align-content: space-between;
}