CSS - 개구리 게임(2)

Flexbox Froggy

 

 

저기에 있는 개구리들을 연못 색깔에 알맞게 배치해야 한다.

처음에는 flex-direction: column; 속성을 이용해서 가로를 기준으로 수직 정렬을 시킨다.

#pond {
  display: flex;
  flex-direction: column;
}

 

 

 

이제 여기서, 저 개구리 무리들을 밑으로 내리기만 하면 된다.

그러면 align-items: flex-end; 속성을 적용시켜보자.

 

#pond {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

 

하지만, 개구리 무리들이 오른쪽으로 이동되었다.

이유를 찾아보니, Flex의 방향이 column일 경우 justify-content의 방향이 세로로, align-items의 방향이 가로로 바뀐다고 한다.

현재 Flex 방향이 column이기 때문에,  justify-content는 시작점이 가로 기준으로 정렬된다.

따라서, 저 개구리 무리들을 밑으로 내리고 싶으면, justify-content: flex-end; 속성을 넣으면 된다.

#pond {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

 

짜잔!

개구리 무리들이 연못 색깔에 알맞게 들어가 있는 모습을 볼 수 있다.