5.13 uni-app flex学习笔记

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

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

注:如果将css移动到外部,则

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:重写容器中元素在交叉轴上的对齐方式

你可能感兴趣的:(5.13 uni-app flex学习笔记)