Flexbox Froggy 문제풀이 13번~18번

13번. flex-direction, justify-content, 그리고 align-items를 사용하여 개구리들이 자기 색깔과 같은 수련잎 위로 이동할 수 있도록 도와주세요. 

1. 개구리가 수련잎 색상 순서와 맞도록 flex-direction:row-reverse를 지정하고

2. 개구리들이 화면 가운데 올 수 있도록 justify-content:center를 지정하고

3. 아래로 내려올 수 있도록 align-items:flex-end를 지정합니다.

#pond {
	display: flex;
	flex-direction:row-reverse;
	justify-content:center;
	align-items:flex-end;
}

 

 

14번. order 속성을 이용하여 개구리들의 순서를 수련잎의 순서에 맞게 바꿔주세요. 

기본적으로 플렉스 항목은 소스 순서로 배치가 되기 때문에 flex의 요소 순서를 지정할 수 있도록 order속성을 이용합니다. 

콘솔을 찍어보면 .yellow는 개구리를 의미하고, 꼭 콘솔을 안찍어도 이동하는 개체는 개구리라 노란색 개구리를 order로 지정해서 옮겨주게 됩니다. 

기본값은 0이라 order:1로 지정하면 됩니다.

 

#pond {
	display: flex;
}

.yellow {
	order:1
}

 

 

15번. order 속성을 사용하여 빨간색 개구리를 빨간색 수련잎으로 보내주세요. 

빨간색 개구리를 order 속성을 지정해서 옮겨줍니다.

음수도 지정이 가능해서 order:-1로 지정하면 개구리가 이동합니다. 

#pond {
	display: flex;
}

.red {
	order:-1
}

 

 

16번. align-self는 개별 요소에 적용할 수 있는 또 다른 속성입니다. 

이 속성은 align-items가 사용하는 값들을 인자로 받으며, 그 값들은 지정한 요소에만 적용됩니다. 

align-self는 지정된 align-items 값을 무시하고 개별요소에 적용하는 속성입니다. 이 속성은 align-items가 사용하는 값들을 인자로 받으며, 그 값들은 지정한 요소에만 적용됩니다.

상단에 있는 노란색 개구리만 아래 노란 수련잎으로 이동해주는 문제로 align-self:flex-end를 지정하면 가능합니다. 

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

.yellow {
	align-self:flex-end
}

 

 

17번. order와 align-self를 사용하여 개구리들을 자기 색깔과 같은 수련잎 위로 보내주세요. 

노란색 개구리를 아래쪽 노란 수련잎으로 옮기는 문제입니다. 

1. order:2를 지정해서 노란개구리들을 오른쪽으로 순서이동을 해주고,

2. align-self : flex-end속성을 이용해서 노란 개구리들을 아래로 옮겨줍니다.

 

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

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

 

 

18번. 개구리들이 한 줄 위에 비좁게 앉아있네요. 다음의 값들을 인자로 받는 flex-wrap 속성을 사용하여 개구리들이 넓게 앉을 수 있도록 해주세요. 

flex-wrap 속성은 요소를 한 줄 또는 여러줄로 정렬합니다. 

flex-wrap:wrap 값을 지정해서 정렬시켜주면 개구리들이 이동합니다.

#pond {
	display: flex;
	flex-wrap:wrap;
}

 

 

참고한 사이트 및 영상 

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