CSS布局flex和grid

一、flex

flex-direction属性
flex-direction属性决定主轴的方向（即项目的排列方向）。
.box {
  flex-direction: row | row-reverse | column | column-reverse;
}
row（默认值）：主轴为水平方向，起点在左端。
row-reverse：主轴为水平方向，起点在右端。
column：主轴为垂直方向，起点在上沿。
column-reverse：主轴为垂直方向，起点在下沿
flex-wrap属性
默认情况下，项目都排在一条线（又称”轴线”）上。flex-wrap属性定义，如果一条轴线排不下，如何换行。
.box{
  flex-wrap: nowrap | wrap | wrap-reverse;
}
nowrap（默认）：不换行。wrap：换行，第一行在上方。wrap-reverse：换行，第一行在下方。
flex-flow
flex-flow属性是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap。
.box {
  flex-flow: <flex-direction> <flex-wrap>;
}
 justify-content属性
justify-content属性定义了项目在主轴上的对齐方式。
.box {
  justify-content: flex-start | flex-end | center | space-between | space-around;
}
flex-start（默认值）：左对齐
flex-end：右对齐
center： 居中
space-between：两端对齐，项目之间的间隔都相等。
space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。
align-items属性
align-items属性定义项目在交叉轴上如何对齐。
.box {
  align-items: flex-start | flex-end | center | baseline | stretch;
}
flex-start：交叉轴的起点对齐。
flex-end：交叉轴的终点对齐。
center：交叉轴的中点对齐。
baseline: 项目的第一行文字的基线对齐。
stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。
align-content属性
align-content属性定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。
.box {
  align-content: flex-start | flex-end | center | space-between | space-around | stretch;
}
flex-start：与交叉轴的起点对齐。
flex-end：与交叉轴的终点对齐。
center：与交叉轴的中点对齐。
space-between：与交叉轴两端对齐，轴线之间的间隔平均分布。
space-around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。
stretch（默认值）：轴线占满整个交叉轴。

二、grid

Flex 布局是轴线布局，只能指定"项目"针对轴线的位置，可以看作是一维布局。
Grid 布局则是将容器划分成"行"和"列"，产生单元格，然后指定"项目所在"的单元格，可以看作是二维布局。Grid 布局远比 Flex 布局强大。

块级容器（宽度撑满整行）时  display: grid
行内容器（宽度随内容自适应）时 display: inline-grid;
使用网格布局后，项目的float、display: inline-block、display: table-cell、vertical-align和column-*等设置都将失效。

在容器内划分出3列，每列宽度为100px
grid-template-columns: 100px 100px 100px;
将容器等分为3列，每列宽度为容器总宽度/3
grid-template-columns: 33.33% 33.33% 33.33%;
将容器划分为2列，第1列的宽度 ：第2列的宽度 =  1:2
grid-template-columns: 1fr 2fr;
fr 是fraction 的缩写，意为"片段"，可以与绝对长度的单位结合使用
grid-template-columns: 150px 1fr 2fr;
minmax()函数产生一个长度范围，表示长度就在这个范围之中。它接受两个参数，分别为最小值和最大值。
grid-template-columns: 1fr 1fr minmax(100px, 1fr);
minmax(100px, 1fr)表示列宽不小于100px，不大于1fr。
repeat()接受两个参数，第一个参数是重复的次数，第二个参数是要重复的值。
grid-template-columns: repeat(3, 33.33%);
一列三等分
grid-template-columns: repeat(2, 100px 20px 80px);
第一列和第四列的宽度为100px，第二列和第五列为20px，第三列和第六列为80px。
划分行 grid-template-rows

grid-template-rows: 100px 100px 100px;
或
grid-template-rows: 33.33% 33.33% 33.33%
设置行间距 row-gap
row-gap: 20px;
设置列间距 column-gap
column-gap: 30px;
gap是column-gap和row-gap合并的简写形式
gap: 20px 30px;
如果gap省略了第二个值，浏览器认为第二个值等于第一个值。
实际案例
  <div class="complaint-overview">
    <div style="grid-column: 1 / span 3">111</div>
    <div>222</div>
    <div>333</div>
    <div>444</div>
  </div>
.complaint-overview {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, 1fr);
  gap: 10px;
}
使用span关键字时，它指定了元素应该跨越的列数。所以，grid-column: 1 / span 3;意味着该元素从第一列开始，并跨越接下来的三列（即实际占据第1、2、3列）。
display: grid;
这个属性被设置在一个容器元素上，以将其布局方式改为Grid布局。一旦一个元素被设置为Grid布局，它的直接子元素就可以使用Grid布局的属性来定位和排列。
grid-template-columns: repeat(3, 1fr);
这个属性定义了Grid容器中列的大小和数量。repeat(3, 1fr);的意思是创建三列，每列的大小都相等，使用fr单位进行分配。fr是一个灵活的单位，表示网格容器中可用空间的一份。因此，如果容器宽度为100%，则这三列将各占约33.33%的宽度。
grid-template-rows: repeat(2, 1fr);
类似于grid-template-columns，这个属性定义了Grid容器中行的大小和数量。repeat(2, 1fr);意味着创建两行，每行的大小都相等，各占约50%的容器高度（如果容器高度为100%的话）。
gap: 10px;
这个属性是row-gap和column-gap的简写，用于在Grid容器的行和列之间设置间隙。gap: 10px;表示行和列之间的间隙都是10像素。这个属性在改善Grid布局的可读性和美观性方面非常有用。
这些属性共同工作，以在一个父容器中定义一个3x2的Grid布局，其子元素可以根据需要跨越不同的列。