在Flex布局中，通过设置flex-direction属性可以改变主轴方向，有以下四个取值：
row：默认值，主轴方向为水平方向，起点在左端。
row-reverse：主轴方向为水平方向，起点在右端。
column：主轴方向为垂直方向，起点在上端。
column-reverse：主轴方向为垂直方向，起点在下端。
下面是一个例子，展示如何使用flex-direction属性来改变主轴方向：
HTML代码：
html
Copycode
<divclass="container">
<divclass="item">1</div>
<divclass="item">2</div>
<divclass="item">3</div>
</div>
CSS代码：
css
Copycode
.container{
display:flex;
flex-direction:row-reverse;/*改变主轴方向为水平方向，起点在右端*/
}
.item{
width:50px;
height:50px;
background-color:#f0f0f0;
margin:10px;
}
这段代码会将.container元素的主轴方向改变为水平方向，起点在右端，同时设置.item元素的宽度、高度和背景颜色。运行效果如下图所示：
Flex改变主轴方向
可以看到，主轴方向已经被改变了，从而导致.item元素的排列方向也随之改变。通过改变flex-direction属性的取值，可以方便地调整主轴方向，从而满足不同的布局需求。
另外需要注意的是，当使用flex-direction改变主轴方向时，侧轴的方向也会相应地发生改变。比如当主轴方向为水平方向时，侧轴方向为垂直方向；当主轴方向为垂直方向时，侧轴方向为水平方向。
如果需要在侧轴方向上对齐，可以使用align-items属性进行设置。下面是一个例子，展示如何使用align-items属性在侧轴方向上对齐：
HTML代码：
html
Copycode
<divclass="container">
<divclass="item">1</div>
<divclass="item">2</div>
<divclass="item">3</div>
</div>
CSS代码：
css
Copycode
.container{
display:flex;
flex-direction:column;/*改变主轴方向为垂直方向*/
align-items:center;/*在侧轴方向上居中对齐*/
}
.item{
width:50px;
height:50px;
background-color:#f0f0f0;
margin:10px;
}
这段代码会将.container元素的主轴方向改变为垂直方向，同时设置align-items属性为center，实现在侧轴方向上居中对齐。运行效果如下图所示：
Flex侧轴对齐方式
可以看到，.item元素在侧轴方向上被居中对齐了。在实际开发中，可以根据需要灵活运用flex-direction和align-items属性，实现各种布局效果。