flex容器

/* 定义flex容器 */
display: flex;

 

 

/*
设置容器内部元素的排列方向
row: 定义排列方向 从左到右
row-reverse: 从右到左
column: 从上到下
column-reverse: 从下到上
*/
flex-direction: column;

 

 

/**
nowrap: 不换行
wrap: 换行
wrap-reverse: 逆向换行
*/
flex-wrap: wrap;

 

 

/*
当轴线超过1条的时候，flex容器可以把多条轴线视为元素对待，可以进行对齐
center：居中
flex-start: 向左对齐
flex-end: 向右对齐
stretch: 当宽度width没有设置的时候，轴线可以被拉伸
space-between: 两端对齐，元素之间的空白等比切分
space-around: 轴线两边的空白等比切分
*/
align-content: space-around;

 

 

/*
设置容器中元素在交叉轴上的对齐方式
stretch：（默认）当元素的高度没有设置，则元素的高度会拉伸至容器高度一致
flex-start: 在交叉轴上向起点位置（向上/向左）对齐
flex-end: 在交叉轴上向结束位置（向下/向右）对齐
center: 居中对齐
baseline: 保证元素中的文字在同一条基准线（保证每个文字都在同一条线上）
*/
align-items: baseline;

 

 

/*
设置元素在主轴上的对其方式
flex-start: (默认)左对齐 或者 向上对齐
flex-end: 右对齐 或者 向下对齐
center: 居中对齐
space-between: 两端对齐，元素之间平均等分剩余空白间隙部分
space-around: 元素两边平均等分剩余空白间隙部分，最左（上）或最右（下）和元素之间距离是1:2
*/
justify-content: space-between;

 

/*
重写容器中元素在交叉轴上的对齐方式
auto: 默认，表示继承父级元素的align-items属性
stretch：当元素的高度没有设置，则元素的高度会拉伸至容器高度一致
flex-start: 在交叉轴上向起点位置（向上/向左）对齐
flex-end: 在交叉轴上向结束位置（向下/向右）对齐
center: 居中对齐
baseline: 保证元素中的文字在同一条基准线（保证每个文字都在同一条线上）
*/
align-self: stretch;

 

 

/*
order: 用于设置flex容器内部的每个元素的排列顺序，默认是0
排序规则，由小到大
flex-grow: 用于设置元素的放大比例，默认为0
如果为0，则不放大
flex-shrink: 用于定义属性的缩放比例，默认为1
设置为0的时候，不进行缩放
*/

order: 0; 
flex-grow: 2; 
flex-shrink: 0;