要更改 Flex 布局中的主轴方向，可以使用 flex-direction 属性。该属性指定了 Flex 容器内项目的排列方向，可以取四个值：row、row-reverse、column 和 column-reverse。
默认情况下，flex-direction 的值为 row，表示主轴方向是水平方向，即项目从左往右排列。如果要将主轴方向改为垂直方向，即项目从上往下排列，可以将 flex-direction 设置为 column。
例如，将以下 Flex 容器的主轴方向改为垂直方向：
<div class="flex-container">
<div class="flex-item">1</div>
<div class="flex-item">2</div>
<div class="flex-item">3</div>
</div>
可以在 CSS 样式中添加以下代码：
.flex-container {
display: flex;
flex-direction: column;
}
.flex-item {
/* 样式省略 */
}
上面的代码将 Flex 容器 .flex-container 的 flex-direction 设置为 column，即垂直方向。这样，项目 1、2、3 就会从上往下排列。
除了 column，还可以使用其他三个值来改变 Flex 容器的主轴方向：
row-reverse：表示主轴方向是水平方向，但是项目的排列方向是从右往左，即反向排列。
column-reverse：表示主轴方向是垂直方向，但是项目的排列方向是从下往上，即反向排列。
row：表示主轴方向是水平方向，即默认的排列方向，从左往右排列。
例如，将以下 Flex 容器的主轴方向改为水平方向，但是项目从右往左排列：
<div class="flex-container">
<div class="flex-item">1</div>
<div class="flex-item">2</div>
<div class="flex-item">3</div>
</div>
可以在 CSS 样式中添加以下代码：
.flex-container {
display: flex;
flex-direction: row-reverse;
}
.flex-item {
/* 样式省略 */
}
上面的代码将 Flex 容器 .flex-container 的 flex-direction 设置为 row-reverse，即水平方向反向排列。这样，项目 1、2、3 就会从右往左排列。
总之，使用 flex-direction 属性可以方便地控制 Flex 容器内项目的排列方向，进而实现多样化的布局效果。