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