大前端之Flex 布局

Flex 布局（Flexible Box Layout）是一种现代的 CSS 布局模式，用于设计复杂的网页布局结构，即使在容器大小动态变化或者未知的情况下也能很好地工作。Flex 布局的主要目标是提供一种更加有效的方式来设计、对齐和分布空间在一维（水平或垂直）方向上。以下是一些关于 Flex 布局的关键用法和属性的详细解答：

1. 容器属性

Flex 布局首先需要在父元素（容器）上设置 display 属性为 flex 或 inline-flex。

• display: flex;：将容器设置为块级 Flex 容器。
• display: inline-flex;：将容器设置为行内级 Flex 容器。

容器属性：

• flex-direction：定义主轴的方向（即项目的排列方向）。

  • row（默认值）：主轴为水平方向，从左到右。
  • row-reverse：主轴为水平方向，从右到左。
  • column：主轴为垂直方向，从上到下。
  • column-reverse：主轴为垂直方向，从下到上。

• flex-wrap：定义项目是否可以在一行（或一列）中折行（换行）。

  • nowrap（默认值）：不换行。
  • wrap：换行，第一行在上方。
  • wrap-reverse：换行，第一行在下方。

• f