CSS Flex布局中主轴和交叉轴排列方式怎么设置？

CSS Flex布局是一种一维的布局模型，用来在容器里灵活地排列子元素。它的排列方式核心在于理解主轴和交叉轴，以及控制这两个轴上的对齐行为。只要弄清楚方向和对齐属性，大多数排版需求都能很快实现。

一、什么是主轴和交叉轴

在Flex容器里，子元素默认沿着一条轴排列，这条轴叫主轴，另一条与之垂直的轴叫交叉轴。主轴的方向由flex-direction决定，交叉轴自动垂直于主轴。

1. 设置主轴方向

使用flex-direction可以切换主轴方向，常用值有：

• row：默认值，主轴为水平方向，从左到右
• row-reverse：主轴水平，但从右到左
• column：主轴为垂直方向，从上到下
• column-reverse：主轴垂直，但从下到上

2. 示例代码

下面这段代码把容器设为纵向排列：

.container {
  display: flex;
  flex-direction: column; /* 主轴变为垂直方向 */
}

.item {
  width: 100px;
  height: 40px;
  background: #ddd;
  margin: 4px;
}

二、控制排列方式和对齐

确定主轴方向后，可以用justify-content控制主轴对齐，用align-items控制交叉轴对齐。

主轴对齐 justify-content

• flex-start：靠主轴起点
• flex-end：靠主轴终点
• center：主轴居中
• space-between：两端贴边，中间平分
• space-around：每个子项左右间距相等

交叉轴对齐 align-items

• stretch：默认值，子项拉伸填满交叉轴
• flex-start：靠交叉轴起点
• center：交叉轴居中
• flex-end：靠交叉轴终点

完整排列示例

以下示例让子项在水平主轴居中，在垂直交叉轴居中：

<div class="box">
  <div class="item">A</div>
  <div class="item">B</div>
</div>

<style>
.box {
  display: flex;
  flex-direction: row; /* 水平主轴 */
  justify-content: center; /* 主轴居中 */
  align-items: center; /* 交叉轴居中 */
  height: 200px;
  background: #f5f5f5;
}

.item {
  width: 60px;
  height: 60px;
  background: #409eff;
  color: #fff;
  margin: 0 6px;
}
</style>

三、小结

CSS Flex的排列方式其实就是先通过flex-direction定主轴，再用justify-content和align-items分别排布主轴和交叉轴。熟练掌握这几个属性，就能应对常见的卡片排列、导航栏、居中弹窗等界面布局场景。

CSSFlexflex-direction修改时间：2026-07-29 12:42:20