Flex是React-Native中重要的布局手段之一。在组件样式中使用flex可以使其在可利用的空间中动态地扩张或收缩。一般而言我们会使用flex:1来指定某个组件扩张以撑满所有剩余的空间。如果有多个并列的子组件使用了flex:1，则这些子组件会平分父容器中剩余的空间。如果这些并列的子组件的flex值不一样，则谁的值更大，谁占据剩余空间的比例就更大（即占据剩余空间的比等于并列组件间flex值的比）。
换句话说，控件可以使用flex进行布局，是相对父类控件的一个伸缩比例的布局。如：
<View style={{flex: 1}}>
<View style={{flex: 1, backgroundColor: 'powderblue'}} />
<View style={{flex: 2, backgroundColor: 'skyblue'}} />
<View style={{flex: 3, backgroundColor: 'steelblue'}} />
</View>
即，最外层view的样式设置为{flex: 1}，这层view就会扩充整个父类view。里层三个View，假如三个view设置的flex:都为1的话，那里层三个view就会三等分撑满外层view的空间。如上，flex分别为1、2、3，则这三个view的高度比例为1/6，1/3，1/2。
Flex Direction
在组件的style中指定flexDirection可以决定布局的主轴。子元素是应该沿着水平轴(row)方向排列，还是沿着竖直轴(column)方向排列呢？默认值是竖直轴(column)方向（所以上面代码三个内层view就是竖直轴方向排列的，所以主要比例是高度的比例）。 如：
即在view中定义样式flexDirection的属性，其子元素（如上，内层view）的布局，为横向布局。
Justify Content
在组件的 style 中指定justifyContent可以决定其子元素沿着主轴的排列方式。子元素是应该靠近主轴的起始端还是末尾端分布呢？亦或应该均匀分布？对应的这些可选项有：flex-start、center、flex-end、space-around、space-between以及space-evenly。flex-start表示靠近主轴起始端分布，center为居中分布，flex-end表示靠近主轴末尾端分布，space-around为主轴两边边上有间距的分布。space-between主轴两边边上无间距的分布，space-evenly为主轴方向均匀分布，相邻间距与首尾间距相等。
Align Items
在组件的 style 中指定alignItems可以决定其子元素沿着次轴（与主轴垂直的轴，比如若主轴方向为row，则次轴方向为column）的排列方式。子元素是应该靠近次轴的起始端还是末尾段分布呢？亦或应该均匀分布？对应的这些可选项有：flex-start、center、flex-end以及stretch。flex-start为靠起始端分布，center为靠中间位置分布，flex-end靠末尾端分布，stretch表示次轴方向拉伸。
注意：要使stretch选项生效的话，子元素在次轴方向上不能有固定的尺寸。以下面的代码为例：只有将子元素样式中的width: 50去掉之后，alignItems: 'stretch'才能生效。
flexDirection为“column”，即主轴的排列方式为竖直方向，次轴为横向方向。justifyContent为“center”，表示子元素沿着主轴（即竖直方向）居中。 alignItem为“stretch”，表示沿着次轴拉伸。如图，第一个view因为固定了次轴上的尺寸，所以‘stretch’不能生效，即没有铺满次轴，第二第三都铺满了次轴了。
网友评论