Flex布局
| 方法 | 描述 |
|---|---|
| display | 设置容器为Flex布局。例如：display: flex; |
| flex-direction | 设置主轴方向，可选值有row（水平）、column（垂直）、row-reverse和column-reverse |
| flex-wrap | 设置是否换行，可选值有nowrap（不换行）、wrap和wrap-reverse |
| flex-flow | flex-direction和flex-wrap的缩写形式，例如：flex-flow: row wrap; |
| justify-content | 沿主轴方向对齐项目，可选值有flex-start、flex-end、center、space-between、space-around和space-evenly |
| align-items | 沿交叉轴方向对齐项目，可选值有flex-start、flex-end、center、baseline和stretch |
| align-content | 多根轴线的对齐方式，可选值有flex-start、flex-end、center、space-between、space-around和stretch |
| flex | 设置项目的伸缩比例，默认值为0 1 auto |
| order | 设置项目的排列顺序，默认值为0 |
| align-self | 单个项目的对齐方式，覆盖align-items的值，可选值有flex-start、flex-end、center、baseline和stretch |
Grid布局
| 方法 | 描述 |
|---|---|
| display | 设置容器为Grid布局。例如：display: grid; |
| grid-template-columns | 设置列的大小和数量，例如：grid-template-columns: 1fr 1fr 1fr; |
| grid-template-rows | 设置行的大小和数量，例如：grid-template-rows: 100px 200px; |
| grid-template-areas | 创建一个网格区域，并给区域命名，例如：grid-template-areas: 'header header header' 'sidebar main main' 'footer footer footer'; |
| grid-template | grid-template-rows、grid-template-columns和grid-template-areas的缩写形式，例如：grid-template: 1fr 1fr / 1fr 1fr 1fr; |
| justify-items | 沿主轴方向对齐网格项，可选值有start、end、center、stretch和baseline |
| align-items | 沿交叉轴方向对齐网格项，可选值有start、end、center、stretch和baseline |
| justify-content | 沿主轴方向对齐网格容器 |
