css flex与grid布局比较

（前面是大概简介，后面为具体实例）可参考此文章

一、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：在自由空间进行分配的一个单位

三、实例操作

    1.flex

        （1）

               

    2.grid

         （1）grid-template-columns、grid-template-rows、grid-gap -> grid -row-gap + grid-column-gap

                    设置属性值为若干个像素，即为几行几列宽度、高度的网格

                    eg：display: grid;
                            grid-template-columns: 120px 120px 120px;

                            grid-template-rows: 50px 50px;    //两行三列高为50排序，宽为100px的网格

                            grid-gap:2px 4px;        //设置格子之间间隙，是grid-column-gap和grid-row-gap的组合

                        //grid-template-columns：200px 1fr 1fr 2fr;        //若容器宽度为1000px，则分成四列（固定的第一列200px，和按比例分的其他三列：200、200、400）

                            //grid-template-columns：1fr 1fr 1fr 1fr;         //等价于repeat（4,1fr）

                    【注】：grid中有一个隐式网格轨道，子元素超出网格数量时会有一个默认的值约束多出的子元素

                        可以通过设置grid-auto-rows和grid-auto-columns来定义行和列。查看详细内容

         (2)grid-column ->grid-column-start + grid-column-end 、grid-row ->grid-row-start + grid-row-end

                       eg:container包含其他组件（可以给网格线起名，便于使用）

                        .container {
                             display: grid;
                             grid-template-columns: 200px [main-start] 1fr [main-end] 200px;
                             grid-template-rows: 200px 200px;
                             grid-gap: 2px 4px;
                        }
                        .footer {
                              grid-column: main-start / main-end;        //开始网格号/结束网格号（可为负数，auto，span num【代表占几个格子】）

                           }

            （3）grid-template-areas、grid-area

                    【注】：可以通过类似于画图的方式来部署网格

                    eg:

 .container {
 display: grid;
 grid-template-columns: 200px  1fr  200px;
 grid-template-rows: 50px 300px 50px;
 grid-template-areas:
  ". h ."
  "l m r"
  ". f .";
 grid-gap: 2px 4px;
}
.header {
 grid-area: h;
}
.left {
 grid-area: l;
}
.right {
 grid-area: r;
}
.main {
 grid-area: m;
}
.footer {
 grid-area: f;
}
 

        (4)repeat 进阶（auto-fit、auto-fill）

            目标：在屏幕大小变化时设置格子大小随之变化、自动填充，设置格子最小最大宽度

            实现：

.container{

  grid-template-columns: repeat(9, minmax(250px, 1fr));    //设置格子在250px和1fr范围内变化，会出现滚动条

  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));    //作用同上，会自动换行，不会出现滚动条

  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));    //作用同上，会自动换行，

}

auto-fill 倾向于容纳更多的列，所以如果在满足宽度限制的前提下还有空间能容纳新列，那么它会暗中创建一些列来填充当前行。即使创建出来的列没有任何内容，但实际上还是占据了行的空间。

auto-fit 倾向于使用最少列数占满当前行空间，浏览器先是和 auto-fill 一样，暗中创建一些列来填充多出来的行空间，然后坍缩（collapse）这些列以便腾出空间让其余列扩张。

部分参考此文章链接