在CSS中，flex-direction属性用于控制flex容器中主轴的方向。默认情况下，主轴方向是水平的，即从左到右。但是，可以使用flex-direction属性将主轴方向更改为垂直方向，即从上到下。
要将主轴方向更改为垂直方向，可以将flex-direction属性设置为column，如下所示：
.container{
display:flex;
flex-direction:column;
}
这将使flex容器的主轴方向变为从上到下。
注意，在更改主轴方向时，交叉轴方向也会随之改变。例如，如果将主轴方向更改为垂直方向，则交叉轴方向将变为水平方向。因此，您可能需要调整其他flex属性，例如align-items和justify-content，以更好地控制flex容器中的布局。
当您将flex-direction属性设置为column时，以下是一些与主轴和交叉轴相关的变化：
主轴变为垂直方向，从上到下排列。
交叉轴变为水平方向，从左到右排列。
justify-content属性现在控制的是交叉轴方向的对齐方式，而不再是主轴方向的对齐方式。例如，使用justify-content:center会将flex容器中所有项目在水平方向上居中对齐。
align-items属性现在控制的是主轴方向的对齐方式，而不再是交叉轴方向的对齐方式。例如，使用align-items:center会将flex容器中所有项目在垂直方向上居中对齐。
项目的宽度会自动调整为填充整个交叉轴的宽度，而不再是填充整个主轴的宽度。
如果您希望在flex容器中将主轴方向更改为垂直方向，可以根据需要使用上述属性进行微调，以达到所需的布局效果。