CSS Flexbox与Grid：构建响应式布局的艺术

Flex弹性布局

display: flex

开启Flex布局模式。将一个元素设置为Flex容器，其直接子元素将成为Flex项目。

.container {
   
   
  display: flex;
}

flex-direction

定义主轴方向（项目排列方向）。可选值：

• row（默认）：水平方向，从左到右。
• row-reverse：水平方向，从右到左。
• column：垂直方向，从上到下。
• column-reverse：垂直方向，从下到上。

.container {
   
   
  flex-direction: row | row-reverse | column | column-reverse;
}

flex-wrap

控制当一行空间不足时是否换行。可选值：

• nowrap（默认）：不换行，项目可能溢出容器。
• wrap：换行，项目在多行中排列。
• wrap-reverse：换行，第一行在下方，后续行向上排列。

.container {
   
   
  flex-wrap: nowrap | wrap | wrap-reverse;
}

justify-content

定义主轴上的对齐方式。可选值：

• flex-start（默认）：项目向起点对齐。
• flex-end：项目向终点对齐。
• center：项目居中对齐。
• space-between：项目间均匀分配间隔，第一个和最后一个项目分别贴靠容器两端。
• space-around：项目间均匀分配间隔，项目两侧间隔相等。
• space-evenly：项目间均匀分配间隔，项目与容器边缘和项目之间的间隔相等。

.container {
   
   
  justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly;
}

align-items

定义交叉轴上的对齐方式。可选值：

• stretch（默认）：项目拉伸填满整个交叉轴。
• flex-start：项目向交叉轴起点对齐。
• flex-end：项目向交叉轴终点对齐。
• center：项目在交叉轴居中对齐。
• baseline：项目按基线对齐。

.container {
   
   
  align-items: stretch | flex-start | flex-end | center | baseline;
}

align-content

仅在多行Flex布局（flex-wrap: wrap）中生效，定义多行项目在交叉轴上的对齐方式。可选值：

• stretch（默认）：各行拉伸填满整个交叉轴。
• flex-start：各行向交叉轴起点对齐。
• flex-end：各行向交叉轴终点对齐。
• center：各行在交叉轴居中对齐。
• space-between：各行间均匀分配间隔，第一行和最后一行分别贴靠容器两端。
• space-around：各行间均匀分配间隔，行两侧间隔相等。

.container {
   
   
  align-content: stretch | flex-start | flex-end | center | space-between | space-around;
}

order

定义项目的排列顺序。数值越小，排列越靠前。默认值为0。

.item {
   
   
  order: <integer>;
}

flex-grow

定义项目的放大比例。默认值为0，表示不放大。如果所有项目设置为非零值，则按照比例分配剩余空间。

.item {