一、flex布局简介（弹性布局）

    flex是flexible box（弹性布局）的简介，是一个一维系统，用来为盒状模型提供最大的灵活性。

使用：任何容器（行内元素可设置为display:inline-block）;

特点：空间分布在行中进行，而非整体

二、grid布局简介（二维布局）

    Gird Layout(css网格布局)是css中最强大的布局系统，是一个二维系统，可以同时处理行和列，可以通过将css规则用于父元素（网格容器）和该元素的子元素（网格元素）来使用网格布局。

    使用：对父元素设置dispay：grid;grid-template-colums和grid-template-rows来设置几行几列，然后对子元素设置占据几行几列

特点：二维网格结构，十分便于操作

基本概念：

        *container：网格容器，设置display:grid就将容器变成了网格容器

        *item：网格项，指网格容器中每一个子元素

        *line：网格线，网格之间的分界线

        *track：网格轨道，两条相邻的网格线之间的空间（行或列）

        *cell：网格单元，每个小网格

        *area：网格区域，四条网格线包围起来的区域

        *fr：在自由空间进行分配的一个单位

这两者的核心是：一个盒子里有很多小盒子，如何排列？

flex就是沿着一条线铺下去，这个线可能水平，也可能垂直，这个平铺的方向用flex-direction来控制。

所以flex才有换行命令。而且当同级小盒子很多的时候，往往动一发而动全身，很不方便。

grid是把盒子用线分成很多份，把小盒子一个个填进去。

如何把盒子分成很多份？ grid-template-columns/grid-template-row

而要把小盒子准确的填进去，

grid有两种方法，一种是给分好的区域起名字。grid-template-areas；然后再给小盒子起名字，小盒子就会占据对应的区域。

设计组供稿