在Flex布局中，主轴（mainaxis）是flex容器中所有flex项目排列的方向，而交叉轴（crossaxis）则是垂直于主轴的方向。
如果要更换主轴方向，可以使用flex-direction属性。该属性接受以下值：
row：默认值，主轴为水平方向，起点在左端。
row-reverse：主轴为水平方向，起点在右端。
column：主轴为垂直方向，起点在上沿。
column-reverse：主轴为垂直方向，起点在下沿。
例如，如果要将主轴方向从水平方向改为垂直方向，可以这样写：
.container{
display:flex;
flex-direction:column;
}
这将使flex容器的主轴方向变为垂直方向，即从上到下排列flex项目。如果想要更换主轴的起点位置，可以使用justify-content和align-items属性。
justify-content属性用于设置flex项目在主轴上的对齐方式，它接受以下值：
flex-start：默认值，flex项目沿主轴起点对齐。
flex-end：flex项目沿主轴终点对齐。
center：flex项目沿主轴居中对齐。
space-between：flex项目沿主轴均匀分布，首尾不留空隙。
space-around：flex项目沿主轴均匀分布，首尾留空隙，项目之间的空隙为相邻项目间距的一半。
space-evenly：flex项目沿主轴均匀分布，首尾留空隙，项目之间的空隙相等。
例如，如果要将flex项目在主轴上居中对齐，可以这样写：
.container{
display:flex;
flex-direction:column;
justify-content:center;
}
这将使flex项目在垂直方向上居中对齐。
align-items属性用于设置flex项目在交叉轴上的对齐方式，它接受以下值：
flex-start：flex项目沿交叉轴起点对齐。
flex-end：flex项目沿交叉轴终点对齐。
center：flex项目沿交叉轴居中对齐。
baseline：flex项目沿基线对齐。
stretch：默认值，flex项目沿交叉轴被拉伸以填满容器。
例如，如果要将flex项目在交叉轴上居中对齐，可以这样写：
.container{
display:flex;
flex-direction:column;
justify-content:center;
align-items:center;
}
这将使flex项目在垂直方向和水平方向上都居中对齐。