1、多栏结构
column-count
column-width
column：120px 3；
column-gap：2em；
column-rule：2px dotted gray；
跨越以及打断：column-span：all or none；
控制打断的位置：
属性：
break-after
break-before
break-inside
值：
column：强制在这个元素前打断
avoid-column（avoid）：禁止浏览器在元素之前打断
2、弹性布局盒
E{
display:flex;
}
当设置以上属性之后
1 <div> 2 <div id=“”> </div> 3 <div id=“”> </div> 4 </div>
以上布局即使没有设置浮动或者定位也会并排显示
1 E{
2 display:flex;
3 flex-direction：column；
4 }
5 column为纵向 ，row为横向（默认值）
2、弹性布局盒 -- 改变内容顺序
第一种：flex-direction：row-reverse；
第二种：flex-order 完全设置项顺序 eg：flex-order：1；
3、弹性布局盒 -- 右盒内对齐
justify-content属性：
根据flex-direction值设置，当横向从左到右，则默认值是flex-start，项从左到右，空白留在右侧
flex-end，从右侧开始排列，空白留在左侧
center：项居中，空白留在所有项的两侧
space-between：项之间的间距是一致的，但第一个与最后一个之间是不留间距的
space-around：每一项两侧都具有相同的间距
上下交轴对齐：
align-items属性：
属性值有stretch（在没有设置项的高度时候才适合用） 、 flex-start 、 flex-end、 center 、 baseline（项沿着第一行内容的基线对齐）
控制项的对齐可以使用align-self属性
4、弹性布局盒 -- 增加弹性
1 E{ 2 flex ： 1 2 150px； 3 } 4 5 == 6 7 E{ 8 flex-grow：1； --- 剩余的宽度被分配为1：1:1三等分 9 flex-shrink：2； -- 超出后，回减的比例 10 flex-basis：150px； --- 宽度是可以伸缩的，伸缩基准是150px 11 }
5、弹性布局盒 -- 将一行进行拆分
flex-wrap：nowrap(一行) / wrap(拆分);
flex-flow:column wrap-reverse; --- 在上方建立新的一行
6、网格布局
E{
display：grid；
}
1 grid-column 2 grid-row 3 4 E{grid-column：75% 75%；} 5 6 单位1fr等于剩余空间的一等分
7、网格布局 -- 项的位置
1 F{ 2 grid-column：2; 3 grid-row:2; 4 } 5 第二行第二列
1 grid-column-span 2 grid-row-span 3 跨越行与列
8、网格布局 -- 对齐与堆积
1 grid-row-align：end； 2 grid-row-align：stretch； 3 grid-row-align：center； 4 5 grid-column-align：end； 6 grid-column-align：stretch； 7 grid-column-align：center； 8 9 如果两块同时在一个单元格，会发生重叠，设置z-index