5.13 uni-app flex学习笔记

flex-direction:设置元素的排列方向

row:从左向右
row-reverse：从右向左
column:从上到下
column-reverse：从下到上

注：如果将css移动到外部，则

<style>
       @import url("flex-direction.css);
</style>

flex-wrap:使容器内的元素换行

nowrap
wrap
wrap-reverse

justify-content:设置元素在主轴上的对齐方式

flex-start:左对齐
center：居中对齐
flex-end：右对齐
space-between：各个元素之间等距的拆分
space-around：元素两边平均等分剩余空白间隙部分，最左和最右和元素之间距离是1：2

align-items:设置元素在交叉轴上的对齐方式

flex-start：在交叉轴上向起点位置（向上/向左）对齐

flex-end：在交叉轴上结束位置（向下/向右）对齐

center：居中对齐

baseline：保证元素中的文字在一条基准线（保证每个文字在一条线上）

stretch(默认)：当元素的高度没有设置，则元素的高度会拉伸至容器高度一致

align-content:设置轴线的对齐方式（轴线当作元素）

flex-start

flex-end

center

stretch:当宽度width没有设置的时候，轴线可以被拉伸

space-between

space-around

flex元素的属性

1.order:用于设置flex容器内部的每个元素的排列顺序，默认是0
排序规则：由小到大
2.flex-grow:用于设置元素的放大比例，默认为0
如果为0，则不放大
3.flex-shrink:用于定义属性的缩放比例，默认为1
设置为0的时候不进行缩放
4.flex-basis:设置元素固定或自动空间的占比
5.align-self:重写容器中元素在交叉轴上的对齐方式