FlexBox 명령어를 익혀보자.

flexbox 명령어는 아직 모든 브라우저에서 상용화되지 않았다고합니다. 작업하는 브라우저를 정확하게 확인하고 작업해야합니다. 그럼이제 flexbox 명령어를 이해해보는 시간을 가져보려합니다.

 

flexbox : 기존 flex, position, table에서 더발전한 명령어입니다.

박스와 아이템들을 횡 또는 열로 자유자재로 정렬해줍니다.

 

해당 멸령어를 효과적으로 사용할 수 있도록 돕는 명령어들

flex-direction:column; = 아래로 정렬합니다.
justify-content:flex-end; = 끝으로 밀어버리는 명령어

 

 

justify-content 

space-between : 사이에 균일한 간격을 줍니다.

space-around : 둘레에 균일한 간격을 줍니다.

space-evenly : 사이와 양끝에 균일한 간격을 줍니다.

flex-direction : row-reverse; 를 통해 개구리들을 반대로 정렬해요

justify-content : center; 를 통해 개구리들을 가운데로 몰아요

align-items : flex-end; 아래로 이동시켜요

 

order라는 명령어로 개구리 하나를 이동시킬 수 있어요

 

 

아래의 게임을 보면서 더욱 심화있게 이해할 수 있어요~!

https://flexboxfroggy.com/#ko

Flexbox Froggy

 

개구락지 마지막 문제 답입니다!