반응형 flexbox4 Flexbox Froggy 문제풀이 19번~24번 19번. flex-direction과 flex-wrap을 사용하여 개구리들이 세 column에 정렬할 수 있도록 도와주세요. 1. 빼곡하게 있는 개구리들을 flex-direction:column을 지정해서 세로로 옮겨주고 2. flex-wrap:wrap로 정렬합니다. #pond { display: flex; flex-direction:column; flex-wrap:wrap } 20번. flex-flow를 사용하여 이전 단계를 반복해보세요. flex-flow는 flex-direction과 flex-wrap를 같이 사용할 수 있도록 하는 속성입니다. 두 속성의 값들을 인자값으로 받으므로 flex-flow:column wrap 지정하면 위의 문제와 같은 값이 나오게 됩니다. #pond { display: f.. 2022. 1. 11. 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 속성을 이용하여 개구리들의 순서를 수련잎의 순서에 맞게 바꿔.. 2022. 1. 11. Flexbox Froggy 문제풀이 7번~12번 7번. 개구리들이 연못을 다시 건너려고 하는데, 수련잎 주위에 간격이 있습니다. justify-content와 align-items를 함께 사용하세요. 우선 메인축의 개구리들을 justify-content속성에 space-aroud값을 지정해서 동일한 간격으로 이동을 시키고 수평축 아래로 이동하기 위해 align-items속성에 flex-end값을 지정합니다 #pond { display: flex; justify-content:space-around; align-items:flex-end; } 8번. 개구리들이 자기 색깔과 같은 수련잎 위로 이동할 수 있도록 도와주세요. 개구리들을 오른쪽으로 이동해야하는데 색이 반대가 되야 합니다. 이 경우 정렬방향을 지정하는 속성인 flex-direction을 이용하고.. 2022. 1. 11. 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를 .. 2022. 1. 11. 이전 1 다음 반응형
