要改变前端flex布局中的主轴方向，可以使用flex-direction属性。这个属性控制主轴的方向。
默认情况下，flex-direction的值为row，即主轴沿着左到右的方向。如果要改变主轴的方向，可以将flex-direction设置为以下值之一：
row-reverse：主轴沿着从右到左的方向。
column：主轴沿着从上到下的方向。
column-reverse：主轴沿着从下到上的方向。
例如，如果要将主轴方向改为从上到下的方向，可以这样设置：
.container{
display:flex;
flex-direction:column;
}
这将把container元素的子元素按垂直方向排列。
除了flex-direction属性，还有其他的一些属性可以改变主轴方向。
justify-content属性：可以控制项目在主轴上的对齐方式。
flex-start：默认值，项目靠主轴起始端对齐。
flex-end：项目靠主轴末尾端对齐。
center：项目居中对齐。
space-between：项目平均分布在主轴上，首尾不留空白。
space-around：项目平均分布在主轴上，每个项目周围留有相等的空白。
space-evenly：项目平均分布在主轴上，包括首尾两端留有相等的空白。
例如，如果要让项目在主轴上居中对齐，可以这样设置：
.container{
display:flex;
justify-content:center;
}
align-items属性：可以控制项目在交叉轴上的对齐方式。
stretch：默认值，项目被拉伸以适应交叉轴。
flex-start：项目靠交叉轴起始端对齐。
flex-end：项目靠交叉轴末尾端对齐。
center：项目居中对齐。
baseline：项目基线对齐。
例如，如果要让项目在交叉轴上居中对齐，可以这样设置：
.container{
display:flex;
align-items:center;
}
align-content属性：可以控制多行项目在交叉轴上的对齐方式。
stretch：默认值，各行被拉伸以适应交叉轴。
flex-start：各行靠交叉轴起始端对齐。
flex-end：各行靠交叉轴末尾端对齐。
center：各行居中对齐。
space-between：各行平均分布在交叉轴上，首尾不留空白。
space-around：各行平均分布在交叉轴上，每个行周围留有相等的空白。
space-evenly：各行平均分布在交叉轴上，包括首尾两端留有相等的空白。
例如，如果要让多行项目在交叉轴上居中对齐，可以这样设置：
.container{
display:flex;
flex-direction:column;
align-content:center;
}
希望这些信息能对你有所帮助。