布局可谓是前端最最基础的知识了，但是也是最常用的知识。
此文自己存留，方便以后查找属性
在IOS开发中有storyboard+Auto Layout，在Android开发中有LinearLayout,RelativeLayout…。那么在ReactNative开发中也有着自己的一套布局方式，就是flexbox,使用方式和Android中的LinearLayout有些相似，但是实现的功能更为强大。ReactNative这一套布局方式是通过web继承过来的，只不过阉割了部分属性。
属性
- alignItems
- alignSelf
- justifyContent
- flexDirection
- flexWrap
| 名称 | 属性 |
|---|---|
| alignItems | flex-start , flex-end , center , stretch |
| alignSelf | auto , flex-start , flex-end , center , stretch |
| justifyContent | flex-start , flex-end , center , space-between , space-around |
| flexDirection | row , column |
| flexWrap | wrap , nowrap |
掌握以上属性基本都能完成所有的布局。下面是我见到过最通俗易懂的理解图
来自于勾三股四
需要记住的ailgnItmes和justifyContent都是表示对齐方式的，ailgnItmes表示主轴，justifyContent表示侧轴。这个主轴是根据flexDirection的属性决定的。ailgnItmes和alignSelf有相同的功能，不过不同点是它是用来让每一个单行的容器居中而不是让整个容器居中。
flexDirection表示元素在View中的排列顺序，和LinearLayout中的orientation差不多了。
flexWrap用来约束元素超出父容器的时候是否换行。
