CSS 的三种布局方式

布局的分类

固定宽度布局：一般的宽度为 960px / 1000px / 1024px。
不固定宽度布局：主要靠文档流来布局，一般在手机上用。

文档流本来就是自适应的，不需要加额外样式。

响应式布局

pc上固定宽度，手机上不固定固度，混合布局。

布局的思路

从大到小(老手)
从小到大(新手)

布局的选择

float布局

子元素: float: left; 和 width。
父元素: clearfix。
不需要做响应式，手机上没有IE，这个专为lE做的。
需要自己计算宽度，不灵活。

.clearix::after {
    content:";
    display: block;
    clear: both;
}

最后一个 div 一般不设置宽度。

如何让 div 水平居中显示

设置 margin: 0 auto; 。
设置 margin-left: auto; 和 margin-right: auto; 推荐使用这个，更加严谨。

平均布局

在中间加一个图层 x, 使用负 margin。

flex 布局

flex 需要一个 container (容器) 和一个 item 。

设置一个 flex 容器

.container {
  display: flex | inline-flex;
}

主轴方向

.container {
    /* 从左到右 | 从右到左 | 从上到下 | 从下到上 */
    flex-direction: row | row-reverse | column | column-reverse;  
}

主轴对齐方式

.container {
  /* 居中靠拢 | 两端分散 | 中间分散 | 中间分散（间隔相等）左边靠拢 | 右边靠拢*/
  justify-content: center | space-between | space-around | space-evenly | flex-start | flex-end;
}

纵轴对齐

. container {
  /*  居中对齐 | 上边对齐 | 下边对齐 | 拉伸对齐 | 基准线对齐*/
  align-items: center | flex-start | flex-end | stretch | baseline;
}

是否折行

.container {
   /* 不折行，宽度会被压缩 | 折行 | 反向折行 */
   flex-wrap: nowrap | wrap | wrap-reverse

多行内容

很少用到

.container {
  /* 居中靠拢 | 两端分散 | 中间分散 | 中间分散（间隔相等）左边靠拢 | 右边靠拢 | 拉伸对齐*/
  align-content: center | space-between | space-around | space-evenly | flex-start | flex-end | stretch;
}

item 属性

改变顺序

.item {
   /* 可以设置负值，数值越小越靠前 */
   order: 1;
}

分配多余空间

.item {
   flex-grow: 1;
}

防止变瘦

item {
   /*默认 1： 平均压缩， 0 ：不能压缩*/
   flex-shrink: 1 | 0;
}

单独设置某个 item 的对齐方式

.item {
  align-self: flex-start;
}

flex-basis 控制基准线宽度，默认 auto。

缩写

.item {
  /* 填入 flex-grow flex-shrink flex-basis 的值，中间用空格隔开*/
  flex: flex-grow flex-shrink flex-basis;
}

flex 注意事项

永远不要把 width，height 写死，不要使用 px，除非特殊说明。
应该使用百分比，加 min, max 前缀，vw，rem。

grid 网格布局

grid 布局也分 container 和 item。
二维布局用 grid，一维布局用 flex。
grid 尤其适合不规则的布局。

设置 grid 容器

.container {
  display: grid | inline-grid;
}

设置行和列

/* 5列 3行 */
.container {
  grid-template-columns: 40px 50px auto 50px 40px;
  grid-template-rows: 100px 300px 100px;
}

item 可以设置范围

.item {
  /* 行：从第 1 根线 到第 3 根线，第 1 根线到第 4 根线 */
   grid-row-start: 1;
   grid-row-end: 3; 
   grid-column-start: 1;
   grid-column-end: 4;
}

给每根线取名字

.container {
  grid-template-columns: [first] 40px [line2] 50px [line3] auto [col4-start] 50px [five] 40px [end];
  grid-template-rows: [row1-start] 25% [row1-end] 100px [third-line] auto [last-line];
}

fr - free space

巧记：份

.container {        
            grid-template-columns: 1fr 20px 1fr 1fr;
            grid-template-rows: 1fr 1fr 2fr;
        }

间隙

.container {
    /* 行间隙和列间隙 */
    grid-gap: 20px;
    /* 行间隙 */
    grid-row-gap: 20px; 
   /* 列间隙 */
    grid-column-gap: 20px;
 }

分区

  .header {
    grid-area: header;
  }

  .main {
    grid-area: main;
  }

  .sidebar {
    grid-area: sidebar;
  }

  .footer {
    grid-area: footer;
   }

  .container {
    display: grid;
    grid-template-columns: 200px 200px 200px 200px;
    grid-template-rows: 50px 500px 100px;
    grid-template-areas: 
      "header header header header"
      "main main . sidebar"
      "footer footer footer footer";
  }

资料来源：饥人谷