用简单易懂的方式向初学者介绍 CSS3 flexbox。

如今，无论你是经验丰富的前端开发者还是初学者，都离不开 Flexbox。Flexbox 能让你更高效地管理最终布局中的内容，而且在构建复杂的网页布局方面，Flexbox 也拥有巨大的市场需求。

CSS Flexbox 将为你的视觉开发作品集增添一件利器。本文将以简洁易懂的方式，结合视觉示例和可直接复制的代码，讲解 CSS3 Flexbox 的所有属性。请耐心阅读至最后，让你的 CSS 技能更上一层楼。

这里有一些实时示例，您可以点击这里查看。
这里是 GitHub 链接，您可以点击这里查看源代码。

1.显示：

`display` 是 CSS 盒模型属性，它是所有后续 flex 相关属性的基础属性。它定义了一个 flex 容器，根据给定的值，可以是行内元素或块级元素。它允许其所有直接子元素使用 flex 布局。

2.灵活订单

弹性项目默认保持与源元素相同的顺序。顺序属性可以控制它们在弹性容器中的显示顺序。

3.弯曲方向

flex-direction 定义了 flex-box 容器内元素的排列方式。例如：
row：与 text-direction 相同；
row-reverse：与 text-direction 不同；
column：与 row 相同，但从上到下；
column-reverse：与 row-reverse 相同，但从上到下。

4.柔性包装

Flex-wrap 默认保持内联显示，与其他属性一样，它也具有灵活性。您可以根据需要更改其属性，使元素自动换行。以下是一些值示例和使用场景：
nowrap：所有 Flex-wrap 元素将显示在同一行；
wrap ： Flex-wrap 元素将自动换行到多行（从下往上）；
wrap-reverse： Flex-wrap 元素将自动换行到多行（从下往上）。

5.柔性收缩

弹性收缩与弹性增长正好相反。它仅在元素必须缩小以适应容器时（即容器过小时）才会生效。
默认情况下，每个元素的弹性收缩值为 1，这意味着它会随着容器的收缩而缩小。

6.柔性流

CSS 中，`flex-direction` 和 `flex-wrap` 属性是简写，它们同时定义了弹性容器的主轴和横轴方向。默认值分别为 `row` 和 `nowrap`。

7.弹性基础

这定义了元素在分配剩余空间之前的默认大小。它可以是带单位的长度值，也可以是类似 auto 这样的关键字。content flex-basis 的默认值为“auto”。

8. 内容合理性

此属性定义弹性项目沿“x”轴或主轴的对齐方式。justify-content 的默认值为“flex-start”。

flex-start：元素将沿 x 轴出现在弹性容器的起始位置。flex
-end：元素将沿 x 轴出现在弹性容器的末尾。space
-between：元素沿 x 轴方向出现时，左右两侧会留出间距。space
-around：元素沿 x 轴方向左右两侧会同时留出间距。center
：元素将沿 x 轴居中对齐。

9. 弹性

弹性属性决定了弹性增长、弹性收缩和弹性基准的组合简写形式。第二个和第三个属性是可选的。默认值为“0 1 auto”，但如果将其设置为单个数字值，则类似于“1 0”。

10.对齐项目

Align-items 属性定义了弹性项目沿 y 轴或交叉轴的默认对齐或布局方式。flex
-start：项目将沿 y 轴出现在弹性容器的起始位置。flex
-end：项目将沿 y 轴出现在弹性容器的末尾。center
：项目将沿 y 轴出现在弹性容器的中心位置。

11. 自我调整

这样就可以为单个弹性项目覆盖默认对齐方式。我们可以仅针对单个项目覆盖 align-items 属性。

12.对齐内容

此属性定义了当“y”轴上有额外空间时，弹性容器内部的线条，类似于 justify-content 如何将单个项目沿主轴对齐。

本文尝试涵盖所有 CSS3 flex-box 属性并给出示例，同时还提供了带有GitHub 源代码的实时示例。

希望您喜欢这篇文章，请告诉我您的想法。如果您想深入了解 CSS3 编码规范和前端 Web 开发最佳实践，请查看这篇文章。您还可以查看我为初学者准备的 15 个 HTML5 最佳实践，帮助您优化标记结构。如果您发现任何错误或疏漏，请告诉我。感谢您的阅读，祝您编码愉快！