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