ReactNative: Flexbox布局

MarianneRol 5年前
   <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>