在使用CSS的display:flex属性时，可以通过设置flex-direction属性来更改主轴方向。默认情况下，主轴方向是水平方向，即从左到右排列项目。如果想要更改主轴方向为垂直方向，可以将flex-direction属性设置为column。
例如，下面的代码将设置flex-direction为column，使得项目垂直排列：
.container{
display:flex;
flex-direction:column;
}
除了column，flex-direction还支持以下值：
row:主轴方向为水平方向，从左到右排列项目（默认值）。
row-reverse:主轴方向为水平方向，从右到左排列项目。
column-reverse:主轴方向为垂直方向，从下到上排列项目。
除了flex-direction之外，还有一些其他的属性可以用于控制主轴方向：
justify-content:该属性用于定义项目在主轴上的对齐方式。默认值为flex-start，表示左对齐。还有以下取值：
flex-start:左对齐。
flex-end:右对齐。
center:居中对齐。
space-between:项目沿主轴平均分布，首尾两端贴边。
space-around:项目沿主轴平均分布，项目间距相等，首尾两端距容器边缘的距离是其他项目间距的一半。
space-evenly:项目沿主轴平均分布，项目间距相等，包括首尾两端。
align-items:该属性用于定义项目在交叉轴上的对齐方式。默认值为stretch，表示拉伸对齐。还有以下取值：
flex-start:顶部对齐。
flex-end:底部对齐。
center:居中对齐。
baseline:基线对齐。
stretch:拉伸对齐。
align-content:该属性用于定义多行项目在交叉轴上的对齐方式。只有在容器有多行时才会生效。还有以下取值：
flex-start:顶部对齐。
flex-end:底部对齐。
center:居中对齐。
space-between:多行项目沿交叉轴平均分布，首尾两端贴边。
space-around:多行项目沿交叉轴平均分布，项目间距相等，首尾两端距容器边缘的距离是其他项目间距的一半。
stretch:拉伸对齐。