1. 传统盒模型布局方式

使用 display 属性（文档流布局） + position 属性（定位布局） + float属性（浮动布局

2. 文档流布局

这是最基本的布局方式，就是按照文档的顺序一个一个显示出来，块元素独占一行，行内元素共享一行

3. 浮动布局

浮动方式布局就是使用 float 属性，使元素脱离文档流，浮动起来

4. 定位布局

我们也可以通过 position 属性来进行定位

5. flex 布局

  1. 定义:Flex 是 Flexible Box 的缩写，意为”弹性布局”，用来为盒状模型提供最大的灵活性。
  2. 使用flex布局
    1) flex 的使用方法很简单，只需要将其 display 属性设置为 flex 就可以，也可以设置行内的 flex，
    2) 记得 Webkit 内核的浏览器，必须加上 -webkit 前缀。
    3)注意，设为 Flex 布局以后，子元素的 float、clear 和 vertical-align 属性将失效。
    .div {
    display: -webkit-flex;
    display: flex;
    display: inline-flex;
    display: -webkit-inline-flex;
}
    在 flex 中，最核心的概念就是容器和轴，所有的属性都是围绕容器和轴设置的。其中，容器分为父容器和子容器。轴分为主轴和交叉轴（主轴默认为水平方向，方向向右，交叉轴为主轴顺时针旋转 90°）。
  3. 父容器上有六个属性
    • flex-direction：主轴的方向。有row确定按行排列和column按列排列两个属性
      .div {
  flex-direction: row;                // 默认值，主轴为水平方向，起点在左端。
  flex-direction: row-reverse;        // 主轴为水平方向，起点在右端。
  flex-direction: column;             // 主轴为垂直方向，起点在上。
  flex-direction: column-reverse;     // 主轴为垂直方向，起点在下。
}
    • flex-wrap：属性决定子容器如果在一条轴线排不下时，如何换行。
      .div {
  flex-wrap: nowrap;          // 默认，不换行
  flex-wrap: wrap;            // 换行，第一行在上方。
  flex-wrap: wrap-reverse     // 换行，第一行在下方。
}
    • flex-flow：flex-direction 属性和 flex-wrap 属性的简写形式。
      .div {
  flex-flow: row wrap;按行排列，换行
}
    • justify-content：子容器在主轴的排列方向。
      .div{
    justify-content: flex-start;      // 默认，左对齐
    justify-content: flex-end;        // 右对齐
    justify-content: center;          // 居中
    justify-content: space-between;   // 两端对齐，项目之间的间隔都相等。
    justify-content: space-around;    // 每个项目两侧的间隔相等。
    所以，项目之间的间隔比项目与边框的间隔大一倍。
}
    • align-items：子容器在交叉轴的排列方向。
      .div {
    align-items: flex-start;    // 交叉轴的起点对齐。
    align-items: flex-end;      // 交叉轴的终点对齐。
    align-items: center;        // 交叉轴的中点对齐。
    align-items: baseline;      // 项目的第一行文字的基线对齐。
    align-items: stretch;       // 默认，如果项目未设置高度或设为auto，将占满整个容器的高度。
}
    • align-content：多根轴线的对齐方式。
      .div {
    align-content: flex-start;   // 与交叉轴的起点对齐
    align-content; flex-end;     // 与交叉轴的终点对齐。
    align-content: center;       // 与交叉轴的中点对齐。
    align-content: space-between;// 与交叉轴两端对齐，轴线之间的间隔平均分布。
    align-content: space-around; // 每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。
    align-content: stretch;     // 默认 轴线占满整个交叉轴。
}
  4. 子容器属性
    • order：子容器的排列顺序:性定义项目的排列顺序。数值越小，排列越靠前，默认为 0。
      .div{
  order: num; 
}
    • flex-grow：子容器剩余空间的拉伸比例,按照该比例给子容器分配空间
      .div{
    flex-grow: 1
}
    • flex-shrink：子容器超出空间的压缩比例:超出的部分按 1:2 的比例从给子容器中减去。
        此属性要生效，父容器的 flex-wrap 属性要设置为 nowrap
.div{
    flex-shrink: 1; /* default 0 */
}
    • flex-basis：子容器在不伸缩情况下的原始尺寸,主轴为横向时代表宽度，主轴为纵向时代表高度。
      .div{
    flex-basis: 1; | auto; /* default auto */
}
    • flex：子元素的 flex 属性是 flex-grow,flex-shrink 和 flex-basis 的简写
      .div{
    flex:1;
}
    • align-self
      子容器的 align-self 属性允许单个项目有与其他项目不一样的对齐方式，可覆盖父容器 align-items 属性。默认值为 auto，表示继承父元素的 align-items属性，如果没有父元素，则等同于 stretch。
      .div{
    align-self: auto;             // 继承父元素的 align-items 属性
    align-self: flex-start;       // 交叉轴的起点对齐。
    align-self: flex-end;         // 交叉轴的终点对齐。
    align-self: center;           // 交叉轴的中点对齐。
    align-self: baseline;         // 项目的第一行文字的基线对齐。
    align-self: stretch;          // 默认，如果项目未设置高度或设为auto，将占满整个容器的高度。
}

6. grid 网格布局

  1. 网格线(Grid Lines): 网格线组成了网格，他是网格的水平和垂直的分界线

  2. 网格轨道(Grid Track):网格轨道是就是相邻两条网格线之间的空间，就好比表格中行或列。所在在网格中其分为grid column和grid row

  3. 网格单元格(Grid Cell):网格单元格是指四条网格线之间的空间。所以它是最小的单位，就像表格中的单元格。

  4. 网格区域(Grid Area)
    网格区域是由任意四条网格线组成的空间，所以他可能包含一个或多个单元格。相当于表格中的合并单元格之后的区域。

  5. 使用 grid 布局
    1) 使用 grid 布局很简单，通过display属性设置属性值为 grid
    2) 网格容器中的所有子元素就会自动变成网格项目（grid item），
    3) 然后设置列（grid-template-columns）和 行（grid-template-rows）的大小，
    4) 设置 grid-template-columns 有多少个参数生成的 grid 列表就有多少个列。
    注：当元素设置了网格布局，column、float、clear、vertical-align属性无效。
    如果没有设置 grid-template-columns，那么默认只有一列，宽度为父元素的 100%，例如
    比如我们设置如下的 HTML，

赏
评 论