[CSS] flexbox 개념 정리 & Flexbox Froggy 문제

 

 

📒 Flexbox

 

- flexbox는 flex-direction을 이용해 주축(main-axis)을 설정

- flex-direction : row / row-reverse / column / column-reverse

 

- 교차축(cross-axis) : 주축에 수직인 축

 

- justify-content : 주축 방향의 정렬 방식 설정

 

- align-items : 교차축 방향 정렬 방식

 

- flex-wrap : 요소가 한 줄에 꽉 찼을 때 다음 줄로 넘기는 속성

nowrap(기본 설정) / wrap / wra-reverse

 

 

 

- flex-flow : flex-direction flex-wrap

- space between : 요소 사이 간격 띄우기

- space around : 요소 사이 + 주변 간격 띄우기

- space evenly : 요소 사이 간격 똑같이 맞춤

 

 

---

🐸 Flexbox Froggy 24번 문제

첫 화면

 

빨간 개구리를 최하단으로 보내기 위해 flex-flow: column-reverse

 

wrap : 왼쪽 아래에서 위로 요소를 다음 줄로 넘김

 

wrap-reverse : 오른쪽 아래에서 요소를 다음 줄로 넘김

align-content: 요소가 담긴 두 줄의 간격을 띄움  

 

 

justify-content: 주축이 column-reverse이므로 열 기준 가운데인 center로 노란색 개구리 가운데 정렬

 

 

귀엽고 재미있는 게임으로 flexbox 개념 배우기!

나도 나중에 이런 게임 만들어보고 싶다. 

반응형 웹에서는 space between을 주로 쓸 것 같음.

 

 

---

 

참고 자료

Flexbox Froggy

A Complete Guide to Flexbox | CSS-Tricks