一、display：flex（弹性布局）
display为flex，用来定义一个容器元素为一个弹性容器（flexcontainer），即其子元素（flexitems）也成为弹性项目（flexitems），从而实现弹性布局。
设置display为flex时，还可相应设置子元素的一些样式。
flex-direction：指定了弹性容器中子元素的排列方式。
flex-direction：row || row-reverse || column || column-reverse
可选值： row（横向从左到右，左对齐）、 row-reverse（反转横向，右对齐）、column（纵向从上往下）、column-reverse（反转纵向）
justify-content：设置弹性盒子元素在主轴（横轴）方向上的对齐方式。
justify-content：flex-start || flex-end || center || space-between || space-around
可选值： flex-start（从头开始紧挨着填充）、flex-end（从尾开始紧挨着填充）、center（居中紧挨着填充）、space-between（平均分布，第一个和最后一个子元素对齐父容器的边线）、space-around（平均分布，两边留有一半的间隔空间）
效果展示图：
align-items：设置弹性盒子元素在侧轴（纵轴）方向上的对齐方式。
align-items：flex-start || flex-end || center || baseline || stretch
可选值： flex-start（在纵轴上，紧靠最上面）、flex-end（在纵轴上，紧靠最下面）、center（在纵轴上居中放置）、baseline（基线对齐）、stretch（auto，按照父元素的行高排列）
flex-wrap：设置弹性盒子的子元素超出父容器时是否换行。
flex-wrap：nowrap || wrap || wrap-reverse || initial || inherit
可选值： nowrap （单行，不换行）、wrap（可换行）、wrap-reverse（反转wrap的排列）
align-content：修改 flex-wrap 属性的行为，类似 align-items, 但不是设置子元素对齐，而是设置行对齐。
align-content：flex-start || flex-end || center || space-between || space-around || stretch
可选值： flex-start（各行从起始位置开始堆叠）、flex-end（各行从结束位置开始堆叠）、center（从中间堆叠）、space-between（各行在父容器里平均分布，第一行和最后一行紧贴父容器的顶部和底部）、space-around（各行在父容器里平均分布，第一行和最后一行保留间距的一半）
align-self：在弹性子元素上使用。覆盖容器的 align-items 属性。
align-self：flex-start || flex-end || center || baseline || stretch
可选值： flex-start（在该行纵轴上，紧靠最上面）、flex-end（在该行纵轴上，紧靠最下面）、center（在该行纵轴上居中放置）、baseline（基线对齐）、stretch（auto，按照所在行的高度排列）
效果展示图：
flex：设置弹性盒子的子元素如何分配空间。
flex属性是flex-grow、flex-shrink、flex-basis属性的简写属性。默认值是 0 1 auto。
flex-grow：放大比例。默认为0，即使有剩余空间，也不放大。所有子元素的flex-grow：1时，等分剩余空间。
flex-shrink：缩小比例。默认为1，如果空间不足，子元素将缩小。所有子元素flex-shrink：1时，缩小的比例相同。flex-shrink：0，空间不足时，也不会缩小。
flex-basis：内容盒的尺寸。默认为auto。设置后，相当于指定一个初始大小。
flex：1（重点！！！）
设置flex为1时，相当于设置，flex-grow：1，flex-shrink：1，flex-basis：auto。子元素会在父容器内等分布局。
二、display：grid（网格布局，也叫栅栏布局）
当一个元素将 display 设置为 grid 或者 inline-grid 后，它就变成了一个网格容器，内容内的所有子元素将成为网格元素。
grid-template-columns：指定列的大小，以及网格布局中设置列的数量。
grid-template-rows：指定网格布局中行的大小。
fr 单位：网格布局重引入了 fr 单位，一个 fr 代表网格容器中可用空间的一等份。
grid-column-gap：设置列之间的间距。
grid-row-gap：设置行之间的间距。
grid-gap：表示grid-column-gap 和 grid-row-gap属性的缩写。
grid-column：表示grid-column-start 和 grid-column-end属性的缩写。示例：grid-column：1 / 5；表示从第 1 列开始，第 5 列结束。
grid-row：表示grid-row-start 和 grid-row-end属性的缩写。示例：grid-row：1 / 5；表示从第 1 行开始，第 5 行结束。
Question：实现三栏均分布局。
flex
方案1：flex:1;
方案2：flex-basis:calc(100% / 3)
grid
给父容器设置：grid-template-columns：1fr 1fr 1fr
