[CSS] flexbox 예제(개구리 게임)

youtu.be/7neASrWEFEM

1. container, item으로 구성됨

 

container

justfy-content 안의 내용물을 어캐 정렬할지

justify-content: space-around 네모 박스로 사용 할 수 있음 

중심축에서 아이템을 어캐 배치할지

 

align-item 반대축에서 아이템을 어캐 배치할지

 

item 

order, flex-grow, flex-shrink

 

2. flexbox는 중심축과 수평축이 있음

 

3. flex-flow 는 flex-direction + flex-wrap 를 합친 것

flex- flow : column wrap 와 같이 쓸 수있는데

flex-direct : column, flex-wrap : wrap를 쓴것과 동일한 결과를 보여준다.

 

Flexbox Froggy - CSS flexbox 속성 배우기 게임

Flexbox Froggy

개구리 게임 마지막 24단계 답

flex-items : flex-start;
flex-flow : column-reverse wrap-reverse;
align-content: space-between;
justify-content : center;

 

 

flexbox 관련된 여러 youtube 영상을 보다가 앨리님의 강의 또한 듣게 되었다. 인상깊었던건 마지막 개구리게임이다.

그저 강의로 한번 보면 까먹기 쉬운데 게임으로  flex 여러 속성들을 적용시켜봄으로써 언젠가 flex를 이용할 때 어떤 속성들이 있었더라 ? 떠올릴 수 있으럿 같다. 굳굳