这篇文章，我们来整理一下 CSS 布局相关内容

布局是什么

布局是把页面分成一块一块，按左中右、上中下等排列。

布局分类

固定宽度布局，一般宽度为 960 / 1000 / 1024px
不固定宽度布局，主要靠文档流的原理布局
响应式布局，在PC上固定宽度，在手机上不固定宽度的一种混合布局

布局思路

从大到小，先定下大局，然后晚上每个部分的小布局
从小到大，先完成小布局，然后组成大布局

用什么 CSS 布局

如果需要兼容 IE9 ，那我们使用 float 布局
如果不需要兼容 IE9 。那么，如果只兼容最新浏览器，那我们使用 grid 布局
如果不止兼容最新浏览器，那我们使用 flex 布局。

注意： 使用 float 布局和 flex 布局时，必要时采用负 margin 。

float 布局

步骤

子元素上加 float: left 和 width
父元素上加 .clearfix

.clearfix{
    content: '';
    display:block;
    clear: both;
}

使用 float 布局，一般会留一些空间或者最后一个不设 width。

注意: IE 6/7 存在双倍 margin 的bug，通过如下办法解决

针对 IE 6/7 ，把 margin 减半，使用 _margin
给元素再加一个 display: inline-block

tips:

有时候 border 会干扰宽度，可以用 outline 替换
通过 margin: 0 auto; 可以设置居中。可以优化为 margin-left: auto; margin-right: auto; 。如果是一个块级元素，左右外边距 auto 可以直接让元素居中

flex 布局

关于 flex 布局，我们通过两部分样式来介绍

container 容器，为包裹区域

.container{/* 让元素变成一个 flex 容器 */
    display: flex | inline-block; 
}

.container{/* 改变 item 流动方向(主轴)，默认 row */
    flex-direction: row | row-reverse | column | column-reverse;
}

.container{/* 改变折行，默认 nowrap 。折行不会把元素断开 */
    flex-wrap: nowrap | wrap | wrap-reverse;
}

.container{/* 主轴对齐方式，默认 flex-start */
    justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly;
}

.container{/* 次轴对齐方式，默认 stretch ，子元素拉到最长的元素一样高 */
    align-items: stretch | flex-start | flex-end | center | baseline;
}

.container{/*多行内容，决定了行之间的间隔*/
    align-content: flex-start | flex-end | center | stretch | space-between | space-around;
}

补充：flex-flow 可以合并 flex-direction 和 flex-wrap 使用

items 为容器内的每一个元素

order ，默认是 0 ，如果把 order 改成一个数，就会按 order 从小到大排列
flex-grow ，控制变胖，如果有多余的空间，按照值分配宽度，不写就不分配。例如导航栏，只设置导航栏 flex-grow: 1，宽度剩余全给导航栏
flex-shrink，控制变瘦，一般写 flex-shrink: 0 防止变瘦，默认是 1
flex-basis，控制基准宽度，默认是 auto ，可以直接用宽度代替
flex: flex-grow flex-shrink flex-basis
align-self，定制父元素的 align-items

items 设置 margin-left: auto，效果和 justify-content: space-between 一样，可以使 items 靠右，推荐使用 margin-left

注意：永远不要把高度和宽度写死

Grid 布局

Grid 也分为 container 和 items

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

.container{/*行和列*/
    grid-template-columns: 40px 50px auto 50px 40px;
    gird-template-rows: 25% 100px auto;
}

.container{/*等比分布局*/
    grid-template-columns: 1fr 1fr 1fr;
}

.container{/*固定一块布局列宽，其余等比分配剩余宽度*/
    grid-template-columns: 1fr 50px 1fr 1fr;
}

.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];
}

.item-a{/*针对上述设置，item可以设置范围*/
    grid-column-start: line2;
    grid-column-end: five;
    grid-row-start: row1-start;
}

通过 grid-template-areas 设置分区

.container{
    display: grid;
    grid-template-columns: repeat(4, 50);/*重复设置*/
    gird-template-rows: auto;
    grid-template-areas:
        "header header header header"
        "main main sider"
        ". footer footer footer";/*不希望出现内容的区域，通常用 . 命名*/
}
.item-a{
    grid-area: header;
}
.item-b{
    grid-area: main;
}
.item-c{
    grid-area: sider;
}

空隙 gap

.container{
    grid-template-columns: 100px 50px 100px;
    grid-template-rows: 80px auto 80px;
    grid-column-gap: 10px;
    grid-row-gap: 15px;
}

结语：一维布局选 Flex ，二维布局选Grid，Grid 尤其适合不规则的布局。