移动网页 -- 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:;
 }
 第二行第二列

 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