Flex 布局是 CSS 中的一种强大布局方式，旨在让容器内的元素能更灵活地排列。通过使用 display: flex，可以轻松控制元素的对齐、方向和间距等。

Flex 布局的基本概念

Flex 布局是基于 容器 和 项 这两个概念的。通过设置容器的 display: flex，它的直接子元素会成为 Flex 项。

容器属性：

• flex-direction: 设置主轴的方向，决定了项的排列方向。可选值：