在CSS中，flex是用于创建弹性布局的属性，可以通过设置flex-direction属性来切换主轴方向。
flex-direction属性有四个可选值：row、row-reverse、column和column-reverse。
row：主轴为水平方向，从左到右排列。
row-reverse：主轴为水平方向，从右到左排列。
column：主轴为垂直方向，从上到下排列。
column-reverse：主轴为垂直方向，从下到上排列。
例如，要将弹性容器的主轴方向切换为垂直方向，可以这样写：
.container{
display:flex;
flex-direction:column;
}
这样，容器内的项目就会从上到下排列。如果需要从下到上排列，可以使用column-reverse值。
当flex-direction设置为row或row-reverse时，项目默认沿水平方向排列。此时，可以通过justify-content属性来控制项目在主轴方向上的对齐方式。justify-content属性有以下可选值：
flex-start：项目在主轴起点对齐。
flex-end：项目在主轴终点对齐。
center：项目在主轴中心对齐。
space-between：项目平均分布在主轴上，两端不留空白。
space-around：项目平均分布在主轴上，两端留有空白，项目之间的间隔为相邻项目间距的一半。
space-evenly：项目平均分布在主轴上，包括两端和项目之间的空白，每个空白的大小相等。
例如，要将弹性容器的主轴方向设置为水平方向，并让项目在主轴方向上居中对齐，可以这样写：
.container{
display:flex;
flex-direction:row;
justify-content:center;
}
此时，容器内的项目将在水平方向上居中对齐。如果需要让项目靠左对齐，可以使用flex-start值；靠右对齐，可以使用flex-end值。
当flex-direction设置为column或column-reverse时，项目默认沿垂直方向排列。此时，可以通过align-items属性来控制项目在交叉轴方向上的对齐方式。align-items属性有以下可选值：
stretch：项目在交叉轴上拉伸，占满整个交叉轴。
flex-start：项目在交叉轴起点对齐。
flex-end：项目在交叉轴终点对齐。
center：项目在交叉轴中心对齐。
baseline：项目在交叉轴上以它们的基线对齐。
例如，要将弹性容器的主轴方向设置为垂直方向，并让项目在交叉轴方向上居中对齐，可以这样写：
.container{
display:flex;
flex-direction:column;
align-items:center;
}
此时，容器内的项目将在垂直方向上居中对齐。如果需要让项目靠顶部对齐，可以使用flex-start值；靠底部对齐，可以使用flex-end值。