[CSS] flexboxfroggy로 재미있게 공부하기

2024.05.15 - [Study] - [CSS] flexboxfroggy로 재미있게 공부하기 justify-content

[CSS] flexboxfroggy로 재미있게 공부하기 justify-content

5단계

위에 있는 개구리들을 맨 아래 수련잎으로 옮겨야 합니다.

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

align-items: flex-end;를 사용하여 컨테이너의 맨 아래로 이동합니다.

 

6단계

개구리가 정중앙에 위치한 수련잎으로 이동해야 합니다.

개구리를 가로의 중간, 세로의 중간으로 이동해야 하겠죠?

#pond {
	display: flex;
	justify-content: center;
	align-items: center;
}

 

7단계

개구리들 사이에 일정한 간격이 있고 맨 아래 수련잎이 위치하는 것을 볼 수 있습니다.

#pond {
	display: flex;
	justify-content: space-around;
	align-items: flex-end;
}