1. display: flex; 找最近的一个标签,把它变成弹性盒子
2. flex-direction: 决定主轴的方向
row 默认值,从左到右
row-reverse 从右到左
column 从上到下
column-reverse 从下到上
3. 主轴排列方式:
justify-content: center; 主轴居中
justify-content: space-between; 两边贴边,中间平分剩余空间
justify-content: flex-start; 主轴左排
justify-content: flex-end; 主轴右排
justify-content: space-around; 平分剩下空间
4. 交叉轴的对齐方式:
align-items: center; 相当于垂直居中
align-items: flex-start;
align-items: flex-end;
5. flex-wrap: wrap; 自动换行,注意给父亲加,自己设宽高
align-content: space-between;
align-content: flex-start;
align-content: flex-end;
6. .four{
order: -2; 值越小,排列越靠前
}
7. flex-grow: 1; 分剩余空间
flex-shrink: 1 默认; 压缩
align-self:flex-end; 自身动
8.grid 是一个 CSS 简写属性
grid-template-columns/rows
该属性是基于网格列的维度,去定义网格线的名称和网格轨道的尺寸大小。
fr 此属性用来定义径向渐变的焦点的半径。
repeat 表示网格轨道的重复部分,以一种更简洁的方式去表示大量而且重复列的表达式。
minmax 是一个来定义大小范围的属性,大于等于 min 值,并且小于等于 max 值。如果 max 值小于 min 值,则该值会被视为 min 值。最大值可以设置为网格轨道系数值<flex> ,但最小值则不行。
row-gap 行距
column-gap 列距