justify-content

用于控制 flex 和 grid 项目沿容器主轴如何定位的工具类。

快速参考

类	属性
justify-start	justify-content: flex-start;
justify-end	justify-content: flex-end;
justify-end-safe	justify-content: safe flex-end;
justify-center	justify-content: center;
justify-center-safe	justify-content: safe center;
justify-between	justify-content: space-between;
justify-around	justify-content: space-around;
justify-evenly	justify-content: space-evenly;
justify-stretch	justify-content: stretch;
justify-baseline	justify-content: baseline;
justify-normal	justify-content: normal;

示例

起点

使用 justify-start 工具类，将项目对齐到容器主轴的起点：

01

02

03

<!-- [!code classes:justify-start] -->
<div class="flex justify-start ...">
  <div>01</div>
  <div>02</div>
  <div>03</div>
</div>

居中

使用 justify-center 或 justify-center-safe 工具类，将项目沿容器主轴居中对齐：

justify-center

01

02

03

04

justify-center-safe

01

02

03

04

justify-center

<!-- [!code classes:justify-center] -->
<div class="flex justify-center ...">
  <div>01</div>
  <div>02</div>
  <div>03</div>
  <div>04</div>
</div>

justify-center-safe

<!-- [!code classes:justify-center-safe] -->
<div class="flex justify-center-safe ...">
  <div>01</div>
  <div>02</div>
  <div>03</div>
  <div>04</div>
</div>

当可用空间不足时，justify-center-safe 工具类会将项目对齐到容器起点，而不是居中。

终点

使用 justify-end 或 justify-end-safe 工具类，将项目对齐到容器主轴的终点：

justify-end

01

02

03

04

justify-end-safe

01

02

03

04

justify-end

<!-- [!code classes:justify-end] -->
<div class="flex justify-end ...">
  <div>01</div>
  <div>02</div>
  <div>03</div>
  <div>04</div>
</div>

justify-end-safe

<!-- [!code classes:justify-end-safe] -->
<div class="flex justify-end-safe ...">
  <div>01</div>
  <div>02</div>
  <div>03</div>
  <div>04</div>
</div>

当可用空间不足时，justify-end-safe 工具类会将项目对齐到容器起点，而不是终点。

两端对齐

使用 justify-between 工具类，沿容器主轴对齐项目，使每个项目之间的间距相等：

01

02

03

<!-- [!code classes:justify-between] -->
<div class="flex justify-between ...">
  <div>01</div>
  <div>02</div>
  <div>03</div>
</div>

环绕对齐

使用 justify-around 工具类，沿容器主轴对齐项目，使每个项目两侧的间距相等：

01

02

03

<!-- [!code classes:justify-around] -->
<div class="flex justify-around ...">
  <div>01</div>
  <div>02</div>
  <div>03</div>
</div>

均匀对齐

使用 justify-evenly 工具类，沿容器主轴对齐项目，使每个项目周围的间距相等，同时也会消除使用 justify-around 时项目之间通常会出现的双倍间距：

01

02

03

<!-- [!code classes:justify-evenly] -->
<div class="flex justify-evenly ...">
  <div>01</div>
  <div>02</div>
  <div>03</div>
</div>

拉伸

使用 justify-stretch 工具类，让自动尺寸的内容项目沿容器主轴填满可用空间：

01

02

03

<!-- [!code classes:justify-stretch] -->
<div class="grid grid-cols-[4rem_auto_4rem] justify-stretch ...">
  <div>01</div>
  <div>02</div>
  <div>03</div>
</div>

默认

使用 justify-normal 工具类，将内容项目按默认位置排列，就像未设置 justify-content 值一样：

01

02

03

<!-- [!code classes:justify-normal] -->
<div class="flex justify-normal ...">
  <div>01</div>
  <div>02</div>
  <div>03</div>
</div>

响应式设计

使用 md: 等断点变体作为 justify-content 工具类的前缀，即可只在中等屏幕尺寸及以上生效：

<div class="flex justify-start md:justify-between ...">
 <!-- ... -->
</div>

在变体文档中了解有关使用变体的更多信息。