CSS Flex Lines概念及其应用

CSS Flex Lines

Flex Lines（弹性行）是 CSS Flexbox 布局中的核心概念之一，用于描述弹性容器内项目的排列方式。当弹性项目在主轴方向无法容纳时，会根据 flex-wrap 属性换行，形成多行布局。以下是关于 Flex Lines 的详细介绍：

---

1. Flex Lines 的定义

Flex Lines 是弹性容器内的一行或多行项目集合。默认情况下，弹性项目会排列在单一行中（flex-wrap: nowrap）。当容器空间不足时，通过设置 flex-wrap: wrap 或 wrap-reverse，项目会换行形成多行，每行称为一个 Flex Line

---

2. 相关属性

2.1 flex-wrap

• 作用：控制项目是否换行
• 取值：
  • nowrap（默认）：单行排列，可能溢出容器
  • wrap：多行排列，新行从上到下添加
  • wrap-reverse：多行排列，新行从下到上添加

2.2 flex-direction

• 作用：定义主轴方向，影响行的排列方向
• 取值：
  • row（默认）：水平排列，主轴为水平方向
  • column：垂直排列，主轴为垂直方向

2.3 flex-flow

• 作用：flex-direction 和 flex-wrap 的简写
• 示例：flex-flow: row wrap

---

3. 多行对齐方式

3.1 align-content

• 作用：控制多行在交叉轴上的对齐方式（仅当存在多行时生效）
• 取值：
  • <