ReactNative: Flexbox布局

   <p>Flex 布局是FlexBox布局的简写，意为“弹性布局”。ReactNative中的Flexbox布局工作原理和Web上的CSS中基本一致，只有少许差异。例如：flexDirection默认的是 column 而不是 row 。</p>    <h2>容器的属性</h2>    <h3>FlexDirection</h3>    <p>flex-direction 属性决定主轴方向。取值： row , row-reverse , column , column-reverse 。</p>    <p>在ReactNative默认： column 。CSS中默认为： row 。</p>    <p style="text-align: center;"><img src="https://simg.open-open.com/show/c25e36e4db429018380189c101ad7406.jpg"></p>    <ul>     <li>column(ReactNative默认值)：主轴为垂直方向，起点在上端。</li>     <li>column-reverse: 与column相反。</li>     <li>row: 主轴水平方向，起点在左端。</li>     <li>row-reverse: 与row相反。</li>    </ul>    <h3>justify-content属性</h3>    <p>justify-content 定义子项目在主轴上的对齐方式。取值： flex-start , flex-end , center , space-between , space-around 。</p>    <p style="text-align: center;"><img src="https://simg.open-open.com/show/42bcc526d388c7f5748c66f03ec63998.jpg"></p>    <ul>     <li>flex-start（默认值）：左对齐</li>     <li>flex-end：右对齐</li>     <li>center： 居中</li>     <li>space-between：两端对齐，项目之间的间隔都相等。</li>     <li>space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。</li>    </ul>    <h3>align-items</h3>    <p>align-items 属性定义项目在交叉轴上如何对齐。取值： flex-start , center , flex-end 和 stretch 。</p>    <p>注意：使用 stretch 时，子元素在次轴上不能够固定高度。</p>    <p style="text-align: center;"><img src="https://simg.open-open.com/show/32c1924d0c0e141e6c11ec14e81b2b09.jpg"></p>    <ul>     <li>flex-start：交叉轴的起点对齐。</li>     <li>flex-end：交叉轴的终点对齐。</li>     <li>center：交叉轴的中点对齐。</li>     <li>stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。</li>    </ul>    <h3>flex-warp</h3>    <p>flex-warp 默认情况下，元素是排列在一条线上的，当排不开则自动换行。取值： nowrap , wrap 和 wrap-reverse 。</p>    <ul>     <li>nowrap : （默认）不换行</li>     <li>wrap: 换行，第一行在上面。</li>     <li>wrap-reverse: 换行，第一行在下面。</li>    </ul>    <h2>小结</h2>    <p>本文介绍了 Flexbox 几个常用的属性。</p>    <p> </p>    <p>来自：https://jesuslove.github.io/2016/12/13/ReactNative-Flexbox布局/</p>    <p> </p>