要在 Flexbox 中改变元素的方向，可以使用 flex-direction 属性。该属性控制了 Flexbox 容器内的主轴方向。
默认情况下，flex-direction 属性的值为 row，即水平方向。如果要更改方向为垂直方向，则可以将其值设置为 column。例如：
.container {
display: flex;
flex-direction: column;
}
上面的代码将会把 .container 容器的方向从默认的水平方向更改为垂直方向。
除了 row 和 column，flex-direction 还支持其他两个值：
row-reverse：与 row 类似，但是从右到左排列。
column-reverse：与 column 类似，但是从下到上排列。
例如：
.container {
display: flex;
flex-direction: row-reverse;
}
上面的代码将会把 .container 容器的方向从默认的从左到右改为从右到左排列。
除了 flex-direction 属性，还有一些其他的 Flexbox 属性可以控制 Flexbox 元素的布局和排列。
justify-content：控制 Flexbox 容器中 Flexbox 元素在主轴上的对齐方式。默认值为 flex-start，即在主轴起点对齐。
可以使用以下值：
flex-start：在主轴起点对齐。
flex-end：在主轴终点对齐。
center：在主轴中心对齐。
space-between：在 Flexbox 容器中平均分配空白间隔，使第一个元素在主轴起点，最后一个元素在主轴终点。
space-around：在 Flexbox 容器中平均分配空白间隔，使元素之间在主轴上具有相等的空白间隔。
space-evenly：在 Flexbox 容器中平均分配空白间隔，使元素之间和容器边缘上的空白间隔相等。
align-items：控制 Flexbox 容器中 Flexbox 元素在交叉轴上的对齐方式。默认值为 stretch，即在交叉轴上拉伸元素以占满整个容器。
可以使用以下值：
flex-start：在交叉轴起点对齐。
flex-end：在交叉轴终点对齐。
center：在交叉轴中心对齐。
baseline：根据元素的基线对齐。
stretch：在交叉轴上拉伸元素以占满整个容器。
align-content：控制 Flexbox 容器中多行 Flexbox 元素在交叉轴上的对齐方式。只有在容器内有多行元素时才起作用。默认值为 stretch，即在交叉轴上拉伸元素以占满整个容器。
可以使用以下值：
flex-start：在交叉轴起点对齐。
flex-end：在交叉轴终点对齐。
center：在交叉轴中心对齐。
space-between：在 Flexbox 容器中平均分配空白间隔，使第一行在交叉轴起点，最后一行在交叉轴终点。
space-around：在 Flexbox 容器中平均分配空白间隔，使行之间在交叉轴上具有相等的空白间隔。
stretch：在交叉轴上拉伸行以占满整个容器。
这些属性可以单独使用或组合使用，以实现所需的布局效果。以下是一个例子，演示了如何在 Flexbox 容器中使用这些属性：
.container {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
align-content: center;
}
上面的代码将会创建一个 Flexbox 容器，其子元素沿着主轴水平排列，从起点到终点之间均匀分布空白间隔，使第一个元素在起点，最后一个元素在终点。元素在交叉轴上居中对齐，并在交叉轴上拉伸以占满整个容器，同时使行之间具有相等的空白间隔。
总之，使用 Flexbox 可以轻松实现复杂的布局效果，并提供了丰富的属性来控制 Flexbox 元素的排列方式。