React Native 弹性布局FlexBox

Posted 2021-05-07 dtdxrk

React Native采用一中全新的布局方式：FlexBox（弹性布局）。可以很方便的实现各种复杂布局，是全新的针对web和移动开发布局的一种实现方式。

何为FlexBox?

   完整名称为：the flexible box Module,旨在通过弹性的方式来对齐和分布容器中的组件。Flexbuju的主要思想是：让容器有能力让其子项目能够改变其宽度|高度|顺序，以最佳方式填充可用空间。

  在布局中，首先得确定主轴方向(flexDirection)，主轴组件的对齐方式（justifyContent），侧轴组件的对齐方式(alignItems)，通过以上四点可以基本确定布局。

FlexBox属性：

flexDirection:该属性确定了主轴方向，枚举值。

　　　　row         主轴方向为水平，起点在左端。

　　　　row- reverse      主轴方向为水平，起点在右端

　　　　column(默认)　　　　主轴方向为垂直，起点在上端

　　　　column-reverse        主轴方向为垂直，起点在下端

justifyContent:该属性确定了组件在主轴方向上的对齐方式，枚举值。

　　　　flex-start(默认) 　　组件沿着主轴方向的起始位置靠齐。如：假如主轴方向是row的话就是左对齐，是row- reverse的话就是右对齐，是column的话就是上对齐，是　column-reverse的话就是下对齐。

　　　　flex-end            组件沿着主轴方向的结束位置靠齐，和flex-start相反。

　　　　space-between　　组件在主轴方向上两端对齐，其中的间隔相等。

　　　　space-around　　　组件会平均分配在主轴方向上，两端保留一定的位置空间。

alignItems:组件在侧轴方向上的对齐方式。

　　　　flex-start         组件沿着侧轴上的起点对齐

　　　　flex-end          组件沿着侧轴上的终点对齐

　　　　center　　　  　组价在侧轴方向上居中对齐

　　　　stretch(默认)　 组件在侧轴方向上占满

flexWrap: 是否换行

默认情况下，项目都排列在一条线上，放不下的部分则不放置，flexWap就是定义是否换行的。

　　　　nowrap(默认)　　　不换行

　　　　wrap            换行，第一行在上方

　　　　wrap-reverse  　　换行，第一行在下方

flex:有三个参数，默认参数为 0 1 auto。  第一个参数为flex-grow,第二，第三个为:flex-shrink和flex-basis。

alignSelf:定义单个组件自己的对齐方式，默认为auto。枚举值：auto|flex-start|flex-end|center|baseline|stretch

position：枚举值，absolute绝对定位，relative相对定位