CSS 页面布局

网页布局的本质是用CSS来摆放盒子，把盒子摆放到相应位置，CSS提供了三种传统布局方式：浮动、定位和标准流。浮动布局可以让多个块级元素一行内排列显示，但是有局限性且繁琐，不能在移动端很好的布局，所以下面主要讲讲flex布局。

标准流就是标签按照规定好默认方式排列。

块级元素会独占一行，从上向下顺序排列 div hr P h1 ul ol dl form table

行内元素会按照顺序，从左到右顺序排列，碰到父元素边缘则自动换行 span a i em

flex弹性布局

flex是flexible Box的缩写，意为”弹性布局”，用来为盒状模型提供最大的灵活性，任何一个容器都可以
指定为flex布局。

• flex布局操作方便极为简单，移动端应用很广泛
• PC端浏览器支持情况较差，IE11或更低版本，不支持或仅部分支持
• 当父盒子设为flex布局以后，子元素的float clear和vertical-align属性将失效。
• 又名伸缩布局、弹性布局、伸缩盒布局、弹性盒布局和flex布局

采用Flex布局的元素称为Flex容器。它所有子元素自动成为容器成员，称为Flex项目，容器成员可以横向排列也可以纵向排列。

通过给父盒子添加flex属性，来控制子盒子的位置和排列方式。

常见父项属性

div {
  /* 1. row默认值主轴x，是从左到右排列的， */
  flex-direction: row;

  /*  row-reverse主轴x翻转，从右到左排列的， */
  flex-direction: row-reverse;

  /* 2. column 设置主轴y，是从上到下排列的， */
  flex-direction: column;
  
  /* column-reverse 设置主轴y翻转，从下到上排列的， */
  flex-direction: column-reverse;
}

justify-content: flex-start;  /* 默认：确认主轴方向，主轴x则从左到右，主轴y 则从上到下 */

justify-content: flex-end;    /* 从尾部开始排列，主轴x则子元素整体贴着右边，主轴y 则子元素整体贴着下面 */   

justify-content: center;      /* 在主轴x上居中对齐；主轴y则水平居中 */        

justify-content: space-around; /* 平分剩余空间 */

justify-content: space-between;/* 先两边贴边 再平分剩余空间（重要） */ 

flex-wrap: nowrap; /* 默认不换行 */
flex-wrap: wrap;   /* 表示要换行 */

align-items: flex-start; /* 默认：从上到下 */
align-items: flex-end; /* 从下到上 */
align-items: center; /* 侧轴垂直居中，挤在一起居中 */
align-items: stretch; /* 拉伸，但子盒子不要给高度 */

align-content: flex-start;    /* 默认值在侧轴的头部开始排列 */
align-content: flex-end;      /* 在侧轴的尾部开始排列 */
align-content: center;        /* 在侧轴中间显示 */
align-content: space-around;  /* 子项在侧轴平分剩余空间 */
align-content: space-between; /* 子项在侧轴先分布在两头，再平分剩余空间 */
align-content: stretch;       /* 设置子项元素高度平分父元素高度 */

flex-flow: column wrap; /* 复合写法 */

/* 同下 */
flex-direction: column;/* 主轴的方向 */
flex-wrap: wrap; /* 换行 */

section div:nth-child(2) {
    flex: 1;
  }

    
p span {
    flex: 1;
  }
    
p span:nth-child(2) {
    flex: 2;
  }

  div span:nth-child(3) {
    align-self: flex-start;  /* 默认上面对齐 */
    align-self: flex-end;    /* 下面对齐 */
    align-self: center;      /* 居中对齐 */
  }

    div span:nth-child(2) {
      order: -1;
    }

grid布局

• grid容器：采用 grid 布局的父元素；
• grid内容：显示项目的区域
• grid项目：grid布局中每一个格子内部放置的元素
• 行：横向
• 列：纵向
• 网格线：网格布局中的横向的纵线的线条
• 单元格：横纵线交汇的区域被称之为单元格
• 间距：网格与网格之间的距离被称为间距

一个m行n列的网格，需要使用m+1条横向，n+1条纵向网格线组成 Demo

display: grid;        /* 块网格 */
display: inline-grid; /* 行内块网格 */

划分行列取值

重点研究的是取值，后面跟几组值，就代表了几行几列，同时也可以使用百分比取值。

grid-template-rows: 100px 100px 100px;    /* 行属性：3行高度100px */
grid-template-columns: 100px 100px 100px; /* 列属性：3列宽度100px */

grid-template-rows: 20% 30% 50%;
grid-template-columns: 100px 100px 100px;

grid-template-rows: repeat(3, 100px);  /* 行属性：3行，高度100px */
grid-template-columns: repeat(5, 20%); /* 列属性：5列，宽度100px */

/* 等同下面 */
grid-template-rows: 100px 100px 100px;
grid-template-columns: 20% 20% 20% 20% 20%;

grid-template-rows: repeat(3, 100px);
grid-template-columns: repeat(auto-fill, 30%); /* 列属性设置30% 只能自动填充3列，多于的10%则留白*/

grid-template-rows: 100px auto 100px;
grid-template-columns: auto 100px 100px;

grid-template-rows: 1fr 2fr 3fr;
grid-template-columns: 100px 100px 100px;

grid-template-rows: 100px 100px minmax(100px, 200px);
grid-template-columns: 100px 100px 100px;

调整间距属性

grid-gap: num1 num2来实现，第一个参数代表的是行间距，第二个参数代表的是列间距。

grid-gap: 20px 30px;

grid-row-gap: 20px;
grid-column-gap: 30px;

容器中的项目

如果想要给网格中添加项目，我们需要在容器中添加对应的div，这些div被称之为项目，项目会默认自动撑开显示在单元格内部。

添加完对应的项目之后，默认项目是横向依次由左向右进行显示，第一行显示完毕之后，才会在第二行中显示。

项目显示顺序

grid-auto-flow属性有两个取值，分别为：row横向显示 column纵向显示。

grid-auto-flow: row;    /* 默认横向 */
grid-auto-flow: column; /* 默认竖向 */

项目对其方式

给项目添加宽度之后，默认项目是在单元格左上角显示的。默认左上角对齐,默认是垂直方向的

使用justify-items水平对其和 align-items垂直对其来调整项目位于单元格内部的对齐方式。

除了start center end这三个取值之外，另有一个默认值就是stretch拉伸效果但是以上两个属性均为单一属性，是否有对应的复合属性来实现。

/* 复合写法：垂直方向 水平方向 */
place-items: end start ;

justify-items: start;    /* Y轴靠上 */
justify-items: center;   /* Y轴居中 */
justify-items: end;      /* Y轴靠下 */

align-items: start;      /* 左对齐 */
align-items: center;     /* 水平居中 */
align-items: end;        /* 右对齐 */

网格位于容器中的对其

默认情况下网格位于容器的左上角位置显示。

/* 复合写法：垂直方向 水平方向 */
place-content: center center;

/* 水平 */
justify-content: start;
justify-content: center;
justify-content: end;

/* 垂直 */
align-content: start;
align-content: center;
align-content: end;


/* 默认值拉伸 */
justify-content: stretch;

/* 列与列之间的距离 是 贴边列距离父元素的距离的 2倍 */
justify-content: space-around;

/* 贴边显示，中间的间距自动拉开 */
justify-content: space-between;

/* 每一列与每一列距离 和 贴边列距离父元素的距离都是一样的 */
justify-content: space-evenly;

• stretch代表的是拉伸默认值
• space-around：行列间距环绕
• space-between： 行列两端对其
• space-evenly： 行列间距平分

合并单元格属性

合并单元格是将划分好的网格，通过让元素使用网格线占位的形式，来达到合并的效果。

• grid-column-start 纵向网格线开始占位
• grid-column-end 纵向网格线结束占位
• grid-row-start 横向网格线开始占位
• grid-row-end 横向网格线结束占位

.box1 {
  grid-row: 1/3;      /* 垂直 */
  grid-column: 2/4;   /* 水平 */

  /* grid-row-start: 1;
  grid-row-end: 3;
  grid-column-start: 2;
  grid-column-end: 4; */
}

.box2 {
  grid-row: 3/4;
  grid-column: 1/3;

  /* grid-row-start: 3;
  grid-row-end: 4;
  grid-column-start: 1;
  grid-column-end: 3; */
}

.box3 {
  grid-row: 4/5;
  grid-column: 2/4;

  /* grid-row-start: 4;
  grid-row-end: 5;
  grid-column-start: 2;
  grid-column-end: 4; */
}