一、display flex 换轴介绍
在前端开发中，网页布局是一个非常重要的部分，而CSS样式中display:flex属性在布局中扮演着重要的角色。display:flex属性可以用于调整容器中的子元素的布局，可以实现非常灵活的网页布局效果。其中，flex布局默认是沿主轴方向排列，即横向排列。如果需要让子元素在垂直方向上排列，需要使用“换轴”（cross-axis）的方法进行调整。接下来，将详细阐述如何使用display:flex实现换轴的布局效果。
二、flex容器的设置
1、设置父容器的display属性为flex
在使用flex布局之前，需要将父容器的display属性设置为flex，如下：
css
Copy code
.container {
display: flex;
}
2、设置子元素的高度
由于flex容器是默认沿主轴方向排列，因此在进行换轴的布局之前，需要先设置子元素的高度。如果子元素的高度不一致，可以通过设置align-items属性来使它们在交叉轴方向上居中。
.container {
display: flex;
align-items: center; /* 交叉轴居中 */
}
.item {
height: 100px;
}
三、使用flex-direction属性实现换轴布局
1、使用flex-direction: column
要实现子元素的垂直排列，可以使用flex-direction属性将主轴方向改为垂直方向。在这种情况下，子元素将从上到下依次排列。
.container {
display: flex;
flex-direction: column; /* 主轴方向为垂直方向 */
}
.item {
height: 100px;
}
2、使用flex-direction: column-reverse
如果需要将子元素从下到上依次排列，可以使用flex-direction: column-reverse属性。
.container {
display: flex;
flex-direction: column-reverse; /* 主轴方向为垂直方向，且从下到上排列 */
}
.item {
height: 100px;
}
四、使用order属性改变子元素顺序
在flex布局中，还可以通过order属性来改变子元素的顺序。默认情况下，子元素的顺序是根据它们在HTML中的顺序排列的，但是可以通过设置order属性来改变它们的顺序。
.container {
display: flex;
}
.item {
height: 100px;
}
.item:nth-child(2) {
order: -1; /* 第二个子元素优先级最高 */
}
五、总结
通过以上方法，我们可以使用display:flex属性实现子元素的垂直排列。其中，通过设置flex-direction属性可以改变主轴方向，从而实现子元素的垂直排列；通过设置order属性，还可以改变子元素的排列顺序。这些方法非常灵活，可以帮助我们轻松地实现各种复杂的网页布局效果。需要注意的是，在使用flex布局时，我们需要考虑子元素的高度，以免出现布局不美观的问题。
总的来说，flex布局是一个非常实用的CSS布局技术，可以帮助我们实现各种不同的网页布局效果。通过掌握其中的一些关键属性，我们可以更加自如地使用这种布局技术，为我们的网页布局带来更多的灵活性和美观性。