CSS flex布局是一种强大的布局模型，可以轻松地在行和列之间切换主轴和交叉轴。默认情况下，主轴是水平方向（从左到右），交叉轴是垂直方向（从上到下）。
要改变主轴方向，可以使用 flex-direction 属性。该属性接受四个值：
row（默认值）：主轴方向为水平方向，起点在左侧，终点在右侧。
row-reverse：主轴方向为水平方向，起点在右侧，终点在左侧。
column：主轴方向为垂直方向，起点在上方，终点在下方。
column-reverse：主轴方向为垂直方向，起点在下方，终点在上方。
例如，要将主轴方向更改为垂直方向（从上到下），可以使用以下CSS代码：
.container {
display: flex;
flex-direction: column;
}
这将使所有子元素按列排列，并且主轴将变为垂直方向。您还可以使用其他CSS属性来更改如何放置和对齐子元素，例如 justify-content 和 align-items。
除了 flex-direction 属性，还有其他一些属性可以帮助您更改主轴方向。以下是其中的一些：
flex-wrap：控制如何换行子元素。默认情况下，子元素在一行上排列，并且尝试缩小以适应容器宽度。如果您将 flex-wrap 属性设置为 wrap，则子元素可以跨行排列，但不会缩小它们的大小。如果您将 flex-wrap 设置为 wrap-reverse，则子元素将从下方开始逐行排列。
flex-flow：flex-direction 和 flex-wrap 属性的简写形式。例如，flex-flow: row wrap 表示将主轴方向设置为水平方向，并允许子元素跨行排列。
justify-content：控制子元素在主轴上的对齐方式。默认情况下，子元素位于容器的起点。可以使用以下值将它们对齐到容器的末尾、居中、均匀分布或空白处：
flex-start（默认）：子元素位于容器的起点。
flex-end：子元素位于容器的末尾。
center：子元素在主轴上居中对齐。
space-between：子元素在主轴上均匀分布，但首尾元素距离容器边缘更近。
space-around：子元素在主轴上均匀分布，并在它们之间创建空白间隔。
space-evenly：子元素在主轴上均匀分布，并在它们之间创建相等的空白间隔。
align-items：控制子元素在交叉轴上的对齐方式。默认情况下，子元素位于容器的交叉轴起点。可以使用以下值将它们对齐到容器的末尾、居中或基线上：
stretch（默认）：子元素在交叉轴上拉伸以填充整个容器高度。
flex-start：子元素位于容器的交叉轴起点。
flex-end：子元素位于容器的交叉轴末尾。
center：子元素在交叉轴上居中对齐。
baseline：子元素在其基线上对齐。
以上这些属性都可以与 flex-direction 结合使用，以创建各种不同的布局效果。例如，将主轴方向设置为水平方向，并使用 justify-content 属性将子元素居中对齐，可以创建一个水平居中的菜单栏。