在Flex布局中，通过flex-direction属性可以改变主轴的方向。
默认情况下，主轴方向是水平的（即从左到右），而侧轴方向是垂直的（即从上到下）。如果要将主轴方向改为垂直方向（即从上到下），可以将flex-direction属性设置为column。
例如，以下代码将flex容器的主轴方向设置为垂直方向：
.container{
display:flex;
flex-direction:column;
}
这样，子元素会沿着从上到下的方向排列，而不是从左到右。需要注意的是，这种排列方式也会影响到侧轴方向的布局方式。因此，如果想要在侧轴方向上进行对齐和分布等操作，需要使用align-items和justify-content属性来控制。
除了将flex-direction属性设置为column来改变主轴方向为垂直方向外，还可以将其设置为row-reverse或column-reverse来反转主轴方向。
例如，以下代码将flex容器的主轴方向设置为从右到左：
.container{
display:flex;
flex-direction:row-reverse;
}
这样，子元素会沿着从右到左的方向排列。
另外，如果要在网格布局中改变主轴方向，则可以使用grid-template-columns和grid-template-rows属性来指定列和行的大小，并使用grid-auto-flow属性来指定主轴方向。默认情况下，grid-auto-flow属性的值为row，即将元素从左到右，从上到下地排列。将其设置为column可以将元素从上到下，从左到右地排列。
例如，以下代码将网格容器的主轴方向设置为从上到下：
.container{
display:grid;
grid-template-columns:repeat(3,1fr);
grid-template-rows:repeat(4,1fr);
grid-auto-flow:column;
}
这样，网格中的元素会沿着从上到下的方向排列。
总之，通过flex-direction和grid-auto-flow属性，我们可以方便地改变Flex布局和网格布局中的主轴方向。