Css中，display属性值flex（弹性布局）、grid（网格布局）

一、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