弹性布局flex与网格布局grid知识点

1.弹性布局Flex（http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html?utm_source=tuicool）
    说明：
        布局的传统解决方案，基于盒状模型，依赖 display 属性 + position属性 + float属性。它对于那些特殊布局非常不方便，比如，垂直居中就不容易实现。
    简介：
        弹性盒子是 CSS3 的一种新的布局模式;CSS3 弹性盒（ Flexible Box 或 flexbox），是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式;引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的子元素进行排列、对齐和分配空白空间。
        1.Flex 是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。
        2.任何一个容器都可以指定为 Flex 布局。
                    display: flex;
        3.行内元素也可以使用 Flex 布局。
                    display: inline-flex;
        Webkit 内核的浏览器，必须加上-webkit前缀。 
                    display: -webkit-flex; /* Safari */
                    display: flex;
    概况：
        弹性盒子由弹性容器(Flex container)和弹性子元素(Flex item)组成；弹性容器通过设置 display 属性的值为 flex 或 inline-flex将其定义为弹性容器；弹性容器内包含了一个或多个弹性子元素；
    注意： 
        弹性容器外及弹性子元素内是正常渲染的。弹性盒子只定义了弹性子元素如何在弹性容器内布局。
        设为 Flex 布局以后，子元素的float、clear和vertical-align属性将失效。
    父容器属性：
        1.flex-direction属性：  决定子元素在容器中的排列方式
                    语法：
                        flex-direction: row | row-reverse | column | column-reverse;
                    取值：
                        row：横向从左到右排列（左对齐），默认的排列方式。
                        row-reverse：   反转横向排列（右对齐，从后往前排，最后一项排在最前面。
                        column： 纵向排列。
                        column-reverse：反转纵向排列，从后往前排，最后一项排在最上面。
        2.flex-wrap ：用于指定弹性盒子的子元素换行方式。
                    语法：
                        flex-wrap: nowrap|wrap|wrap-reverse|initial|inherit;
                    取值：
                        nowrap - 默认， 弹性容器为单行。该情况下弹性子项可能会溢出容器。
                        wrap - 弹性容器为多行。该情况下弹性子项溢出的部分会被放置到新行，子项内部会发生断行
                        wrap-reverse -反转 wrap 排列。
        3.flex-flow 属性  是 flex-direction 和 flex-wrap 属性的复合属性。用于设置或检索弹性盒模型对象的子元素排列方式。
                    语法：
                        flex-flow: flex-direction flex-wrap|initial|inherit;
                    取值：
                        默认值：row nowrap
                    形如：
                        flex-flow: row-reverse wrap；
        4.justify-content属性   定义了子元素在容器上的对齐方式。
                    语法：
                        justify-content: flex-start | flex-end | center | space-between | space-around;
                    取值：
                        flex-start（默认值）：左对齐
                        flex-end：右对齐
                        center： 居中
                        space-between：两端对齐，项目之间的间隔都相等。
                        space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。
        5.align-items属性： 定义子元素在交叉轴（基于左边和上边）方向上的对齐方式
                    语法：
                        align-items: flex-start | flex-end | center | baseline | stretch;
                    取值：
                        flex-start：交叉轴的起点对齐。
                        flex-end：交叉轴的终点对齐。
                        center：交叉轴的中点对齐。
                        baseline: 项目的第一行文字的基线对齐。
                        stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。
        6.align-content：用于修改flex-wrap属性的行为，即用来修改各个行的对齐方式
                    语法：
                        align-content：flex-start|flex-end|center|space-between|space-around|stretch；
                    取值：
                        flex-start：与交叉轴的起点对齐。
                        flex-end：与交叉轴的终点对齐。
                        center：与交叉轴的中点对齐。
                        space-between：与交叉轴两端对齐，轴线之间的间隔平均分布。
                        space-around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。
                        stretch（默认值）：轴线占满整个交叉轴。
    子元素属性：
        1.order属性 定义项目的排列顺序。数值越小，排列越靠前，默认为0。
                用法：
                    order:自定义数值;
        2.flex-grow属性 定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。
                用法：
                    flex-grow：自定义数值
                注意：
                    如果所有项目的flex-grow属性都为1，则它们将等分剩余空间（如果有的话）。如果一个项目的flex-grow属性为2，其他项目都为1，则前者占据的剩余空间将比其他项多一倍。
        3.flex-shrink属性   定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。
                用法：  
                    flex-shrink: 自定义数值
                注意：
                    如果所有项目的flex-shrink属性都为1，当空间不足时，都将等比例缩小。如果一个项目的flex-shrink属性为0，其他项目都为1，则空间不足时，前者不缩小。
        4.flex-basis属性    定义了在分配多余空间之前，项目占据的主轴空间（main size），浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。
                用法：
                    flex-basis: | auto; /* default auto */
                注意：
                    它可以设为跟width或height属性一样的值（比如350px），则项目将占据固定空间。
        5.flex属性  是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选。（建议优先使用这个属性，而不是单独写三个分离的属性，因为浏览器会推算相关值。）
                用法：  
                    flex：2,1,auto;（后两个元素可选）
        6.align-self属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。(该属性可能取6个值，除了auto，其他都与align-items属性完全一致。)
                用法：
                    align-self: auto | flex-start | flex-end | center | baseline | stretch;
    注意：
        弹性布局flex实例：http://www.ruanyifeng.com/blog/2015/07/flex-examples.html

2.网格布局Grid（http://www.ruanyifeng.com/blog/2019/03/grid-layout-tutorial.html）
    网格布局（Grid）是最强大的 CSS 布局方案。它将网页划分成一个个网格，可以任意组合不同的网格，做出各种各样的布局。
    Grid 布局的属性分成两类。一类定义在容器上面，称为容器属性；另一类定义在项目上面，称为项目属性。
    一、容器属性
        1.display: grid | inline-grid | subgrid;
            grid: 生成块级网格
            inline-grid: 生成行内网格
            subgrid: 如果网格容器本身是网格项（嵌套网格容器），此属性用来继承其父网格容器的列、行大小。
        注：当元素设置了网格布局，column、float、clear、vertical-align属性无效。
        2.使用以空格分隔的多个值来定义网格的列和行。可以使用css长度（px、em等）、百分比、或用分数（用 fr 单位）
            grid-template-columns: 25% 25% 25% 25%; //列，多少个参数就多少个列
            grid-template-rows: 25% 100px auto; //行，多少个参数就多少行
          可以使用repeat()函数，简化重复的值
            repeat()接受两个参数，第一个参数是重复的次数，第二个参数是所要重复的值。
            形如：
                display: grid;
                grid-template-columns: repeat(3, 33.33%);
                grid-template-rows: repeat(3, 33.33%);
        3.grid-row-gap  属性设置行与行的间隔（行间距），grid-column-gap属性设置列与列的间隔（列间距）。
          grid-gap属性是grid-column-gap和grid-row-gap的合并简写形式
        4.grid-template-areas   通过获取网格项中的grid-area属性值（名称），来定义网格模版。重复网格区（grid-area）名称将跨越网格单元格，‘.’代表空网格单元。
        5. grid-auto-flow   设置子元素的放置顺序
            row：先行后列   1 2 3
                           4 5 6
            column：先列后行    1 3 5
                               2 4 6
        6.justify-items属性设置单元格内容的水平位置（左中右），align-items属性设置单元格内容的垂直位置（上中下）。
            start：对齐单元格的起始边缘。
            end：对齐单元格的结束边缘。
            center：单元格内部居中。
            stretch：拉伸，占满单元格的整个宽度（默认值）。
        7.justify-content属性是整个内容区域在容器里面的水平位置（左中右），align-content属性是整个内容区域的垂直位置（上中下）。
            start - 对齐容器的起始边框。
            end - 对齐容器的结束边框。
            center - 容器内部居中。
            stretch - 项目大小没有指定时，拉伸占据整个网格容器。
            space-around - 每个项目两侧的间隔相等。所以，项目之间的间隔比项目与容器边框的间隔大一倍。
            space-between - 项目与项目的间隔相等，项目与容器边框之间没有间隔。
            space-evenly - 项目与项目的间隔相等，项目与容器边框之间也是同样长度的间隔。
        8.grid-auto-columns属性和grid-auto-rows属性用来设置浏览器自动创建的多余网格的列宽和行高。如果不指定这两个属性，浏览器完全根据单元格内容的大小，决定新增网格的列宽和行高。
    二、子元素属性
        1.子元素的位置是可以指定的，具体方法就是指定项目的四个边框，分别定位在哪根网格线。
            grid-column-start属性：左边框所在的垂直网格线
            grid-column-end属性：右边框所在的垂直网格线
            grid-row-start属性：上边框所在的水平网格线
            grid-row-end属性：下边框所在的水平网格线
                形如：子元素的左边框是第二根垂直网格线，右边框是第四根垂直网格线。
                     grid-column-start: 2;
                     grid-column-end: 4;
        2.grid-area属性指定项目放在哪一个区域。
            形如：子元素位于e区域
                 grid-area: e;
        3.justify-self属性设置单元格内容的水平位置（左中右），跟justify-items属性的用法完全一致，但只作用于单个项目。
          align-self属性设置单元格内容的垂直位置（上中下），跟align-items属性的用法完全一致，也是只作用于单个项目。
            start：对齐单元格的起始边缘。
            end：对齐单元格的结束边缘。
            center：单元格内部居中。
            stretch：拉伸，占满单元格的整个宽度（默认值）。

3.画布Canvas（IE8和之前都不支持)
    是一个容器，默认样式为透明背景，默认宽高为300*150