1. Flexbox & Grid
  2. justify-content

Flexbox & Grid

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
<div class="flex justify-start ...">
<div>01</div>
<div>02</div>
<div>03</div>
</div>

居中对齐

使用 justify-centerjustify-center-safe 实用工具将项目沿容器主轴的中心位置对齐

调整容器大小以查看对齐行为

justify-center

01
02
03
04

justify-center-safe

01
02
03
04
justify-center
<div class="flex justify-center ...">
<div>01</div>
<div>02</div>
<div>03</div>
<div>04</div>
</div>
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-endjustify-end-safe 实用工具将项目沿容器主轴的末尾位置对齐

调整容器大小以查看对齐行为

justify-end

01
02
03
04

justify-end-safe

01
02
03
04
justify-end
<div class="flex justify-end ...">
<div>01</div>
<div>02</div>
<div>03</div>
<div>03</div>
</div>
justify-end-safe
<div class="flex justify-end-safe ...">
<div>01</div>
<div>02</div>
<div>03</div>
<div>03</div>
</div>

当没有足够的可用空间时,justify-end-safe 实用工具会将项目对齐到容器的起始位置,而不是末尾位置。

两端对齐

使用 justify-between 实用工具将项目沿容器主轴对齐,使每个项目之间有相等的空间

01
02
03
<div class="flex justify-between ...">
<div>01</div>
<div>02</div>
<div>03</div>
</div>

周围对齐

使用 justify-around 实用工具将项目沿容器主轴对齐,使每个项目的每一侧都有相等的空间

01
02
03
<div class="flex justify-around ...">
<div>01</div>
<div>02</div>
<div>03</div>
</div>

均匀对齐

使用 justify-evenly 实用工具将项目沿容器主轴对齐,使每个项目周围都有相等的空间,同时也考虑了通常在使用 justify-around 时在每个项目之间看到的空间加倍的情况

01
02
03
<div class="flex justify-evenly ...">
<div>01</div>
<div>02</div>
<div>03</div>
</div>

拉伸

使用 justify-stretch 实用工具允许内容项目填充容器主轴上的可用空间

01
02
03
<div class="flex justify-stretch ...">
<div>01</div>
<div>02</div>
<div>03</div>
</div>

正常

使用 justify-normal 实用工具将内容项目打包在其默认位置,就像没有设置 justify-content 值一样

01
02
03
<div class="flex justify-normal ...">
<div>01</div>
<div>02</div>
<div>03</div>
</div>

响应式设计

前缀a justify-content 实用工具 与断点变体(如 md:)一起使用,以仅在以下情况下应用该实用工具中等 屏幕尺寸及以上

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

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

Copyright © 2025 Tailwind Labs Inc.·商标政策