UniApp的Flex布局

Flex布局的概念

1.flexible box :弹性盒状布局
2.容器控制内部元素的布局定位
3.css3引入的新的布局模型
4.伸缩元素，自由填充，自适应

使用Flex布局的优势

1.可在不同方向排列元素
2.控制元素排序的方向
3.控制元素的对齐方式
4.控制元素之间等距
5.控制单个元素的放大与缩小，占比

Flex布局的常用术语

1.flexcontainer：flex容器
2.flex item：flex元素
3.flex direction:布局方向

Flex布局模型

水平布局
垂直布局

Flex容器的属性

1.flex-direction:设置元素的排列方向
row： 水平排列  row-reverse：水平逆向排列
column：垂直排列  column-reverse：垂直逆向排列

2.flex-wrap：是容器内的元素换行
nowrap：不换行  wrap:换行
wrap-reverse:逆向换行

3.justify-content:设置元素在主轴上的对齐方式
 flex-start :左对齐或上对齐   flex-end：右对齐或下对齐
center：居中对齐
space-between：两端对齐，元素之间平分剩余间隔  
 space-around：元素两边平均等分剩余间隔，两边和元素之间比例1：2

4.align-items:设置元素在交叉轴上的对齐方式
flex-start：交叉轴上向起点对齐（向上/向左）   flex-end：交叉轴上向结束为止对齐（向下/向右）
center：元素居中对齐
baseline：基准线排成一行(保证元素中的文字在一条线上)  stretch（默认拉伸）

5.align-content：设置轴线的对齐方式（轴线当做元素）
当轴线超过1条的时候，flex可以把多条轴线当做元素进行对齐
flex-start ：轴线向左对齐  flex-end  ：轴向向右对齐
center 轴线居中对齐  stretch：交叉轴方向元素拉伸（不设置宽度时生效）
space-between：轴线两端对齐，元素中间平分剩余间隔  
space-around：轴线两边平分剩余间隔

flex元素的属性

1.order:控制元素排列顺序，默认是0，谁最小排在前面，
排序规则：有小到大
2.flex-grow:控制元素的放大比例
用于设置元素的放大比例，如果不设置默认为0，，为0则不放大，整数值为元素放大比列
3.flex-shrink：元素的缩小比例
缩放比例默认为1，会自动缩放，设置为0代表不进行缩放
4.flex-basic:设置元素的固定或自动空间占比
自己放大或缩小的数值
5.align-self:重写align-items的父属性
设置元素交叉轴上特立独行的对齐方式
auto：继承父属性
flex-start ：元素向左对齐  flex-end  ：元素向右对齐
center 元素居中对齐  stretch：交叉轴方向元素拉伸（不设置宽度时生效）
space-between：元素两端对齐，元素中间平分剩余间隔  
space-around：元素两边平分剩余间隔