flex布局是什么
Flex是Flexible Box的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。
Flex布局主要思想是：让容器有能力让其子项目能够改变其宽度、高度（甚至是顺序），以最佳方式填充可用空间
基本概念
采用flex布局的元素，称为flex容器，所有子元素称为容器的成员，称为flex项目（flex item）,简称为"项目".
1.png
容器的属性
- flexDirection
- flexWrap
- justifyContent
- alignItems
项目属性
- flex
- alignSelf
flexDirection 属性
flexDirection 属性决定了主轴的方向有四个属性值：
- row:主轴为水平方向，起点在左端，方向从左到右
- row-reverse: 主轴方向水平从右到左
- column(默认值) ：主轴垂直方向，从上到下
- column-reverse:主轴方向垂直从下到上
flexWrap属性
flexWrap属性定义如果项目一行排不下如何换行。
- nowrap:不换行（默认）
- wrap:换行
justifyContent属性
定义了项目在主轴上的对齐方式
- flex-start:在主轴的开始方向开始排列（默认）有点像Android的RelativeLayout的alignParen属性
- flex-end:在主轴方向的结束方向开始排列
- conter:居中
- space-between：两端对齐，项目之间的间隔相等，（和Android的weight类似）
- space-around: 每个项目两侧的间隔相等，相当于margin在Android的margin相等
alignItems属性
align-items属性定义项目在交叉轴上如何对齐
- flex-start:交叉轴起点对齐
- flex-end:交叉轴终点对齐
- center:交叉轴居中对齐
- stretch(默认值)：如果项目未设置高度或设为auto，将占满整个容器的高度
-
baseline:项目的第一行文字的基准线对齐
2.png
flex 属性
在组件样式中使用flex可以使其在可利用的空间中动态地扩张或收缩。一般而言我们会使用flex:1来指定某个组件扩张以撑满所有剩余的空间。如果有多个并列的子组件使用了flex:1，则这些子组件会平分父容器中剩余的空间。如果这些并列的子组件的flex值不一样，则谁的值更大，谁占据剩余空间的比例就更大（即占据剩余空间的比等于并列组件间flex值的比）
flex-grow属性
flex-grow属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大,如果所有项目的flex-grow属性都为1，则它们将等分剩余空间（如果有的话）。如果一个项目的flex-grow属性为2，其他项目都为1，则前者占据的剩余空间将比其他项多一倍。
alignSelf属性
alignSelf属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。
该属性可能取6个值，除了auto，其他都与align-items属性完全一致。
3.png
如果有多个样式，样式会覆盖，
<Text style={[styles.textStyle,{width:70,backgroundColor:'green'}]}>
文本1
</Text>
网友评论