[DEV] CSS FLEXBOX FROGGY 공략!

headerimg
tailwindcss를 통해 한동한 flex에 매력에 푹빠져서 이것 저것 공부하다보니 처음 flex개념을 쉽게 설명해준 사이트가 있어서 다시 공부해본다.!

사실상 게임이기 때문에 공략해본다!

FLEXBOX FROGGY

flex 박스에 있는 개구리를 연꽃위로 이동 시키는 게임이다. 잔말말고 들어가서 게임하자.

flatuicolors.com

img

이제부터 정답만 나열한다.

level 1

justify-content: flex-end;

level 2

justify-content: center;

level 3

justify-content: space-around;

level 4

justify-content: space-between;

level 5

align-items: flex-end;

level 6

justify-content: center;
align-items: center;

level 7

justify-content: space-around; align-items: flex-end;

level 8

flex-direction: row-reverse;

level 9

flex-direction: column;

level 10

flex-direction: row-reverse; justify-content: flex-end;

level 11

flex-direction: column; justify-content: flex-end;

level 12

flex-direction: column-reverse; justify-content: space-between;

level 13

flex-direction: row-reverse; align-items: flex-end; justify-content: center;

level 14

order: 1;

level 15

order: -1;

level 16

align-self: flex-end;

level 17

align-self: flex-end; order: 1;

level 18

flex-wrap: wrap;

level 19

flex-wrap: wrap; flex-direction: column;

level 20

flex-flow: column wrap;

level 21

align-content: flex-start;

level 22

align-content: flex-end;

level 23

flex-direction: column-reverse; align-content: center;

level 24

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

재미있었다.

flex가 3~4가지 속성만 잘 사용하면 컨테이너 정렬은 껌이 될 것이다!

img


© 2018. All rights reserved.

Powered by blowROCK