flex布局如何转换主轴

在Flex布局中，可以使用`flex-direction`属性来控制主轴的方向。默认情况下，主轴是水平方向（从左到右），但你可以通过设置`flex-direction`属性来改变主轴的方向。

主要可选值包括：

- `row`：主轴为水平方向，元素按从左到右的顺序排列（默认值）。
- `row-reverse`：主轴为水平方向，元素按从右到左的顺序排列。
- `column`：主轴为垂直方向，元素按从上到下的顺序排列。
- `column-reverse`：主轴为垂直方向，元素按从下到上的顺序排列。

以下是一个示例代码，演示如何使用`flex-direction`属性来转换主轴方向为垂直方向：

.container {
  display: flex;
  flex-direction: column;
}

在上述示例中，`.container`是一个具有Flex布局的父容器，通过将`flex-direction`设置为`column`，实现了主轴方向的转换为垂直方向。