引言
CSS Flexbox 是一种新的网页布局方式，可以让你更加灵活地定义容器和项目（Flex items）的大小、位置和顺序。Flexbox 布局适用于各种不同的情况，包括响应式设计、复杂网页布局、移动设备和桌面应用。
在本篇文章中，我们将介绍 Flex 容器和 Flex 项的各种属性和值，并提供实用的示例和指导意义。
Flex 容器
Flex 容器（Flex container）是一个包含 Flex 项的父元素。为了创建一个 Flex 容器，你需要将容器的 display 属性设置为 flex 或 inline-flex。示例如下：
.container {
display: flex; /* 创建一个 Flex 容器 */
}Flex 容器属性
以下是一些常用的 Flex 容器属性：
flex-direction
flex-direction 属性用于指定 Flex 容器中 Flex 项的排列方向。默认值为 row，即左到右水平排列。其他值包括 column、row-reverse 和 column-reverse。
.container {
flex-direction: row; /* 左到右水平排列 */
flex-direction: column; /* 上到下垂直排列 */
flex-direction: row-reverse; /* 右到左水平排列 */
flex-direction: column-reverse; /* 下到上垂直排列 */
}justify-content
justify-content 属性用于指定 Flex 项在主轴上的对齐方式。默认值为 flex-start，即左侧对齐。其他值包括 flex-end、center、space-between、space-around 和 space-evenly。
.container {
justify-content: flex-start; /* 左侧对齐 */
justify-content: flex-end; /* 右侧对齐 */
justify-content: center; /* 居中对齐 */
justify-content: space-between; /* 两端对齐 */
justify-content: space-around; /* 均匀分布并在各项之间留有空间 */
justify-content: space-evenly; /* 均匀分布并在各项两侧留有相等的空间 */
}align-items
align-items 属性用于指定 Flex 项在侧轴上的对齐方式。默认值为 stretch，即拉伸以填满 Flex 容器。其他值包括 flex-start、flex-end、center 和 baseline。
.container {
align-items: stretch; /* 拉伸以填满 Flex 容器 */
align-items: flex-start; /* 顶部对齐 */
align-items: flex-end; /* 底部对齐 */
align-items: center; /* 居中对齐 */
align-items: baseline; /* 基线对齐 */
}flex-wrap
flex-wrap 属性用于指定 Flex 项是否应该换行。默认情况下，Flex 项不会换行。其他值包括 nowrap、wrap 和 wrap-reverse。
.container {
flex-wrap: nowrap; /* 不换行 */
flex-wrap: wrap; /* 换行 */
flex-wrap: wrap-reverse; /* 反向换行 */
}align-content
align-content 属性用于指定 Flex 项在侧轴上的分布方式。只有在多行 Flex 容器中才有意义。默认情况下，该属性的值为 stretch。其他值包括 flex-start、flex-end、center、space-between、space-around 和 space-evenly。
-- -------------------- ---- ------- ---------- - -------------- -------- -- ----- ---- -- -- -------------- ----------- -- ---- -- -------------- --------- -- ---- -- -------------- ------- -- ---- -- -------------- -------------- -- ---- -- -------------- ------------- -- -------------- -- -------------- ------------- -- ----------------- -- -
Flex 项
Flex 项是 Flex 容器中一个个的子元素。Flex 项具有一些特殊的属性和值，可以控制它们的大小和位置。
Flex 项属性
以下是一些常用的 Flex 项属性：
order
order 属性用于指定 Flex 项的顺序。默认值为 0，表示按照文档流的顺序排列。order 属性可以接受任何整数值（包括负数），表示希望它在 Flex 容器中的位置。示例如下：
.item {
order: 0; /* 按照文档流的顺序排列 */
order: 1; /* 放在第一位 */
order: -1; /* 放在倒数第一位 */
}flex-grow
flex-grow 属性用于控制 Flex 项的宽度。默认情况下，Flex 容器中的所有 Flex 项都有相同的宽度（等分容器）。如果你希望某个 Flex 项更大，可以将其 flex-grow 属性设置为大于 0 的值。示例如下：
.item {
flex-grow: 0; /* 不改变尺寸 */
flex-grow: 1; /* 平均分配剩余空间 */
flex-grow: 2; /* 分配比其他项更多的空间 */
}flex-shrink
flex-shrink 属性用于指定 Flex 项的缩小比例。默认情况下，flex-shrink 的值为 1，表示当空间不足时，Flex 项将缩小以适应 Flex 容器。将 flex-shrink 设置为 0，则可以强制保持 Flex 项的原始大小，即使它们超出 Flex 容器的大小。示例如下：
.item {
flex-shrink: 1; /* 默认值，可自动缩小 */
flex-shrink: 0; /* 强制保持原始大小 */
flex-shrink: 2; /* 缩小比其他项更多 */
}flex-basis
flex-basis 属性用于指定 Flex 项的基础大小。默认情况下，flex-basis 的值为 auto，表示基础大小将根据内容计算。将 flex-basis 设置为具体的值，可以强制将 Flex 项的大小设置为特定的尺寸。示例如下：
.item {
flex-basis: auto; /* 尺寸根据内容计算 */
flex-basis: 100px; /* 固定大小为 100 像素 */
}flex
flex 属性是一个方便的缩写，可以同时设置 flex-grow、flex-shrink 和 flex-basis 这三个属性。默认情况下，flex 的值为 0 1 auto，表示不改变尺寸，但可缩小以适应 Flex 容器。示例如下：
.item {
flex: 0 1 auto; /* 不改变尺寸，但可缩小 */
flex: 1 1 auto; /* 平均分配剩余空间 */
flex: 2 1 200px; /* 分配比其他项更多的空间，但最大为 200 像素 */
}总结
CSS Flexbox 提供了一些强大的布局工具，可以帮助开发者更好地控制容器和项目的大小、位置和排列顺序。本篇文章介绍了一些常用的 Flex 容器和 Flex 项属性，希望能够帮助你更好地理解和使用 Flexbox。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/664eb9aed3423812e4f3bc07