Flexbox Froggy 문제풀이 1번~6번

1번.  오른쪽의 justify-content 속성을 이용하여 개구리가 수련잎으로 이동할 수 있도록 도와주세요. 

justify-content속성은 메인축의 값을 정렬합니다. 

개구리를 오른쪽으로 이동하기 위해서는 오른쪽으로 정렬해주는 flex-end를 이용해줍니다. 

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

 

2번. justify-content를 한 번 더 사용하여 개구리들이 수련잎으로 이동하는 것을 도와주세요. 

초록색과 노란색 개구리를 가운데로 보내줘야하는 문제로 justify-content:center를 이용해서 가운데 정렬을 합니다 

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

 

 

3번. justify-content를 사용하여 세마리의 개구리가 모두 수련잎으로 이동할 수 있도록 도와주세요. 

space-around는 아이템들의 "둘레"를 균일한 간격을 만들어 줍니다. 항목이 주위에 동일한 공간으로 줄에 고르게 분포할 수 있도록 소스 작성을 해주면 개구리들이 각 색에 맞도록 이동합니다. 

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

 

 

4번. justify-content를 사용하세요. 이번에는 수련잎 사이에 동일한 간격이 있습니다. 

동일한 간격은 justify-content 속성의 값을 space-between로 지정합니다. 

#pond {
    display: flex;
    justify-content:space-between;
}

 

 

5번. 이제 align-items를 사용하여 개구릳들이 연못의 아래쪽에 도착할 수 있도록 도와주세요. 

align-items는 수직축 방향으로 아이템들을 정렬하는 속성입니다.

수직축으로 아래로 개구리를 이동해야 하므로 flex-end 값을 주면 개구리가 아래로 내려갑니다.

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

 

 

6번. justify-content와 align-items를 함께 사용하여 개구리가 연못의 중앙으로 이동할 수 있도록 도와주세요. 

justify-content를 이용해서 메인축을 이동하고 align-items를 이용해서 수평축을 이동하는 문제입니다.

모두 가운데로 보내야 하므로 값은 center를 지정해주면 개구리가 가운데로 이동하게됩니다. 

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

 

참고한 사이트 및 영상 

https://www.youtube.com/watch?v=7neASrWEFEM&feature=youtu.be 

https://css-tricks.com/snippets/css/a-guide-to-flexbox/

A Complete Guide to Flexbox | CSS-Tricks