移动网页 -- CSS布局

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、弹性布局盒 -- 增加弹性

E{
   flex ： 1 2 150px；
}

==

E{
   flex-grow：1；   --- 剩余的宽度被分配为1：1:1三等分
   flex-shrink：2；   -- 超出后，回减的比例
   flex-basis：150px； --- 宽度是可以伸缩的，伸缩基准是150px
}

5、弹性布局盒 -- 将一行进行拆分

flex-wrap：nowrap(一行)  /   wrap(拆分);

flex-flow:column wrap-reverse;   --- 在上方建立新的一行

6、网格布局

E{

   display：grid；

}

grid-column   
grid-row

E{grid-column：75% 75%；}

单位1fr等于剩余空间的一等分

7、网格布局 -- 项的位置

F{
   grid-column：2;
   grid-row:2;
}
第二行第二列

grid-column-span
grid-row-span
跨越行与列

8、网格布局 -- 对齐与堆积

grid-row-align：end；
grid-row-align：stretch；
grid-row-align：center；

grid-column-align：end；
grid-column-align：stretch；
grid-column-align：center；

如果两块同时在一个单元格，会发生重叠，设置z-index