Lzh on GitHub

justify-content

控制弹性盒子和网格项目在其容器主轴上的对齐方式的实用工具。

快速参考

类名样式
justify-startjustify-content: flex-start;
justify-endjustify-content: flex-end;
justify-end-safejustify-content: safe flex-end;
justify-centerjustify-content: center;
justify-center-safejustify-content: safe center;
justify-betweenjustify-content: space-between;
justify-aroundjustify-content: space-around;
justify-evenlyjustify-content: space-evenly;
justify-stretchjustify-content: stretch;
justify-baselinejustify-content: baseline;
justify-normaljustify-content: normal;
为flex/grid布局父容器属性。

示例

起始对齐

使用 justify-start 实用工具将项目对齐到容器主轴的起始位置：

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

响应式设计

使用断点变体（例如 md:）作为 justify-content 实用工具的前缀，以便仅在中等尺寸及以上的屏幕上应用该实用工具：

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

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