http://flexboxfroggy.com/ 접속하면 1단게부터 24단게 까지 게임을 통해서 flexBox 레이아웃을 연습할 수 있다.
FlexBox Froggy 게임해답 (마우스로 아래 영역을 긁으세요)
1. justify-content:flex-end;
2. justify-content:center;
3.justify-content:space-around;
4. justify-content:space-between;
5. align-items:flex-end;
6. justify-content:center;
align-items:center;
7. justify-content:space-around;
align-items:flex-end;
8.flex-direction:row-reverse;
9. flex-direction:column;
10. flex-direction:row-reverse;
justify-content:flex-end;
11. flex-direction:column;
justify-content:flex-end;
12. flex-direction:column-reverse;
justify-content:space-between;
13. justify-content:center;
flex-direction:row-reverse;
align-items:flex-end;
14. order:1;
15. order:-3;
16. align-self:flex-end;
17. order:2;
align-self:flex-end;
18. flex-wrap:wrap;
19. flex-wrap:wrap;
flex-direction:column;
20. flex-flow:column wrap;
21. align-content:flex-start;
22. align-content:flex-end;
23. flex-direction:column-reverse;
align-content:center;
24. flex-direction:column-reverse;
flex-wrap:wrap-reverse;
align-content:space-between;
justify-content:center;
'React & React Native ' 카테고리의 다른 글
리액트네이티브 react-native-navigation V2 LifeCycle #4 (0) | 2018.12.25 |
---|---|
리액트네이티브 react-native-navigation v2 Root Screen #2 (2) | 2018.12.24 |
FLEXBOX 레이아웃 속성 정리 (0) | 2018.12.22 |
리액트네이티브 react-native-navigation v2 개발환경 설정 (ios) #1 (0) | 2018.12.21 |
리액트 네이티브 Progress Circles 표시하기 (react-native-progress-circle) (0) | 2018.11.28 |