Flex布局中，主轴和交叉轴可以通过flex-direction属性来控制。默认情况下，主轴方向为水平方向，交叉轴方向为垂直方向。如果需要交换主轴和交叉轴方向，可以通过设置flex-direction:column来实现。
以下是一个简单的示例，展示如何使用Flex布局实现交换主轴和交叉轴方向的效果：
HTML代码：
<divclass="container">
<divclass="item">1</div>
<divclass="item">2</div>
<divclass="item">3</div>
<divclass="item">4</div>
<divclass="item">5</div>
</div>
CSS代码：
.container{
display:flex;
flex-direction:column;
height:100%;
}
.item{
flex:1;
display:flex;
justify-content:center;
align-items:center;
}
上述代码中，将.container元素设置为display:flex，使其成为一个Flex容器。然后，将flex-direction属性设置为column，这样就将主轴方向设置为垂直方向，交叉轴方向设置为水平方向。接下来，将子元素.item的flex属性设置为1，使其平均分配剩余的空间。最后，使用justify-content:center和align-items:center属性将子元素垂直和水平居中对齐。
如果需要在Flex容器中实现转轴效果，可以通过以下步骤来实现：
首先，将Flex容器的高度设置为100%或者一个固定的高度，这样子元素就可以在高度范围内移动。
然后，将子元素的高度设置为100%或者一个固定的高度，并将其宽度设置为0，这样子元素就可以在宽度范围内移动。
接下来，使用flex-direction:row属性将主轴方向设置为水平方向，这样子元素就可以从左到右依次排列。
将子元素的flex-grow属性设置为1，使其能够平均分配剩余的空间。
最后，使用transform:rotate(-90deg)将子元素逆时针旋转90度，实现转轴效果。
下面是一个示例代码：
HTML代码：
<divclass="container">
<divclass="item">1</div>
<divclass="item">2</div>
<divclass="item">3</div>
<divclass="item">4</div>
<divclass="item">5</div>
</div>
Copycode
.container{
display:flex;
flex-direction:row;
height:200px;
}
.item{
flex-grow:1;
height:100%;
width:0;
display:flex;
justify-content:center;
align-items:center;
transform:rotate(-90deg);
transform-origin:topleft;
}
上述代码中，将.container元素设置为display:flex，并将主轴方向设置为水平方向。将子元素.item的高度设置为100%，宽度设置为0，并使用flex-grow:1属性使其能够平均分配剩余的空间。使用transform:rotate(-90deg)和transform-origin:topleft将子元素逆时针旋转90度，使其成为一个竖直方向的元素。