React Native 之 flexbox布局

flexbox布局是w3c继css之后的新的布局方式，可以简便、完整、响应式地实现各种页面布局。Flex是Flexible Box的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。任何一个容器都可以指定为Flex布局。

如果你是Android开发者(跟FlowLayout很像)或是前端开发者，相信你会很轻松的操纵这种布局方式。

首先，我们先来认识一下flexbox布局的几个重要属性

• flexDirection
  定义子元素是水平（row）还是竖直（column）排列，默认值为column。

Paste_Image.png

flexDirection: 'row', 使得子元素水平排列

• justifyContent
  定义子元素在主轴（x轴）的对齐方式

1. flex-start
2. flex-end
3. center
4. space-around -> 两端对齐，项目之间的间隔相等
5. space-between

下面来看下 space-between 的布局方式

Paste_Image.png

justifyContent: 'space-around',

• alignItems
  定义了y轴上子元素的布局方式

1. flex-start
2. flex-end
3. center
4. stretch-> 拉伸至整个容器

• flexWrap
  flexWrap属性定义一条轴线排不下时是否折行。它有两个值，分别是wrap和nowrap，分别代表支持换行和不支持换行，默认是nowrap。

针对于子元素本身的布局方式

1. flex
   是否让当前的视图尽量占用更大的空间，这个属性可能使项目属性justifyContent失效。有两个值0和1，0代表否，1代表是，默认为0。

2. alignSelf
   允许单个项目在交叉轴方向上与其他项目不一样的对齐方式，可覆盖alignItems属性，它的值有五个，除了auto，其他都与alignItem属性完全一致，默认为auto。

不过最后要说的是，这种东西 还是靠自己去玩，才能玩出心得出来。还是一句话：无他 唯手熟尔！！！

IMG_0575.JPG

说句题外话，我写文章，她就一直在我旁边看着