CSS进阶-第二篇：深入 CSS 布局-Flexbox 布局（二）：换行与对齐属性

CSS进阶-第二篇：深入 CSS 布局-Flexbox 布局（二）：换行与对齐属性

在 Flexbox 布局中，除了上一篇介绍的核心概念与方向属性，flex-wrap、justify-content 和 align-items 等属性对于实现复杂且灵活的布局也起着至关重要的作用。接下来我们深入探讨这些属性。

1. flex-wrap 属性剖析

取值功能讲解

• nowrap：这是 flex-wrap 的默认值。它表示 Flex 项目不会换行，所有项目都将在同一行（或列，取决于 flex-direction 的取值）排列。如果 Flex 容器的空间不足以容纳所有项目，项目会缩小以适应容器宽度（或高度）。
• wrap：当设置为 wrap 时，如果 Flex 容器在主轴方向上的空间不足以容纳所有 Flex 项目，项目将自动换行。换行后，新的一行（或列）会根据主轴方向依次排列项目。
• wrap-reverse：与 wrap 类似，项目也会换行。但不同的是，换行后的新项目会从相反的方向开始排列。例如，如果主轴方向是水平从左到右，