2023 11.23笔记

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    列距