能否反转Flexbox交叉轴方向？Flex布局交叉轴配置技术问询

当然可以实现交叉轴方向的反转！你说得没错，flex-direction属性确实是用来指定主轴的方向，但并没有一个专门的属性直接控制交叉轴——不过我们可以通过flex-wrap的wrap-reverse值来达成这个目的。

默认情况下，当flex-wrap: wrap时，交叉轴会保持原生的排列方向（比如主轴为row时，交叉轴是垂直向下；主轴为column时，交叉轴是水平向右）。而设置flex-wrap: wrap-reverse后，交叉轴的方向会直接反转：

• 若主轴是row（水平），交叉轴会从垂直向下变为垂直向上
• 若主轴是row-reverse（水平反向），交叉轴会从垂直向下变为垂直向上
• 若主轴是column（垂直），交叉轴会从水平向右变为水平向左
• 若主轴是column-reverse（垂直反向），交叉轴会从水平向右变为水平向左

这样一来，就能覆盖所有8种可能的布局排列组合了，正好补上你提到的另外4种情况。举个简单的代码示例：

/* 主轴水平，交叉轴垂直向上排列 */
.flex-container {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap-reverse;
}

/* 主轴垂直，交叉轴水平向左排列 */
.flex-container-vertical {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap-reverse;
  height: 300px; /* 需要给容器设置高度才能让垂直主轴下的wrap生效 */
}

内容的提问来源于stack exchange，提问作者Rustem Kakimov