该页面提供了一个CSS Flexbox布局的视觉速查表，包括容器属性、项目属性和常见布局实例。
容器属性
| 属性 |
值 |
描述 |
display |
flex |
启用弹性布局 |
flex-direction |
row |
主轴为水平方向，起点在左端 |
|
row-reverse |
主轴为水平方向，起点在右端 |
|
column |
主轴为垂直方向，起点在上端 |
|
column-reverse |
主轴为垂直方向，起点在下端 |
flex-wrap |
nowrap |
默认值，项目在一条线排列 |
|
wrap |
项目换行 |
|
wrap-reverse |
项目反向换行 |
justify-content |
flex-start |
主轴对齐方式：左对齐 |
|
flex-end |
主轴对齐方式：右对齐 |
|
center |
主轴对齐方式：居中 |
|
space-between |
主轴对齐方式：两端对齐，项目之间的间隔相等 |
|
space-around |
主轴对齐方式：项目两侧的间隔相等 |
align-items |
flex-start |
侧轴对齐方式：顶部对齐 |
|
flex-end |
侧轴对齐方式：底部对齐 |
|
center |
侧轴对齐方式：居中 |
|
baseline |
侧轴对齐方式：以文本基线对齐 |
|
stretch |
默认值，侧轴对齐方式：拉伸以填满容器 |
align-content |
flex-start |
侧轴的对齐方式：顶部对齐 |
|
flex-end |
侧轴的对齐方式：底部对齐 |
|
center |
侧轴的对齐方式：居中 |
|
space-between |
侧轴的对齐方式：两端对齐，项目之间的间隔相等 |
|
space-around |
侧轴的对齐方式：项目两侧的间隔相等 |
|
stretch |
默认值，侧轴的对齐方式：拉伸以填满容器 |
项目属性
| 属性 |
值 |
描述 |
flex-grow |
number |
定义项目的放大比例，默认值为 0，即如果存在剩余空间，也不放大 |
flex-shrink |
number |
定义了项目的缩小比例，默认值为 1，即如果空间不足，该项目将缩小 |
flex-basis |
auto |
定义在分配多余空间之前，项目占据的主轴空间（即主轴尺寸） |
align-self |
auto |
允许单个项目有与其他项目不一样的对齐方式，可覆盖 align-items 属性 |
|
flex-start |
该项目位于容器的起始位置 |
|
flex-end |
该项目位于容器的结束位置 |
|
center |
该项目位于容器的中间 |
|
baseline |
该项目的基线与容器的基线对齐 |
|
stretch |
该项目拉伸以填满容器（如果容器有高度） |
常见布局实例
| 布局 |
容器属性 |
项目属性 |
| 水平导航栏 |
display: flex;justify-content: space-around; |
|
| 垂直侧边栏 |
display: flex;flex-direction: column;justify-content: flex-start; |
|
| 网格布局 |
display: flex;flex-wrap: wrap;justify-content: space-between; |
flex: 1 0 21%; |
| 卡片布局 |
display: flex;flex-wrap: wrap;justify-content: space-around; |
flex: 0 1 calc(33.333% - 10px); |
参考链接