在使用CSS的display:flex属性设置了flex布局后，我们可以通过设置flex-direction属性来改变主轴的方向。
flex-direction属性有四个可能的值：
row（默认值）：水平方向从左到右排列，主轴为水平方向。
row-reverse：水平方向从右到左排列，主轴为水平方向。
column：垂直方向从上到下排列，主轴为垂直方向。
column-reverse：垂直方向从下到上排列，主轴为垂直方向。
以下是设置主轴为垂直方向的示例代码：
.container{
display:flex;
flex-direction:column;
}
注意，改变主轴方向会影响到交叉轴（与主轴垂直的方向）的方向，例如在将主轴方向改为垂直方向后，交叉轴的方向就变成了水平方向。因此，我们可以使用justify-content和align-items属性来控制项目在主轴和交叉轴上的对齐方式。
下面是justify-content和align-items属性的解释：
justify-content属性用于设置项目在主轴上的对齐方式，它有以下几个可能的值：
flex-start：左对齐（默认值）。
flex-end：右对齐。
center：居中对齐。
space-between：两端对齐，项目之间的间隔相等。
space-around：每个项目两侧的间隔相等，项目之间的间隔也相等。
space-evenly：每个项目之间的间隔和两侧的间隔都相等。
示例代码：
.container{
display:flex;
justify-content:center;//居中对齐
}
align-items属性用于设置项目在交叉轴上的对齐方式，它有以下几个可能的值：
stretch（默认值）：如果项目没有设置高度或者设为auto，将占满整个容器的高度。
flex-start：交叉轴的起点对齐。
flex-end：交叉轴的终点对齐。
center：交叉轴的中点对齐。
baseline：项目的第一行文字的基线对齐。
示例代码：
.container{
display:flex;
align-items:center;//交叉轴居中对齐
}
除了以上两个属性，还有align-content和justify-items属性，它们与align-items和justify-content的作用类似，但作用于多行或多列的项目。需要注意的是，这些属性只有在多行或多列的情况下才会生效。