内容对齐

示例

起始对齐

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

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

居中对齐

使用 justify-center 或 justify-center-safe 工具类将项目对齐到容器主轴的中心：

<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 工具类将项目对齐到容器主轴的末端：

<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 工具类在容器主轴上对齐项目，使每个项目之间有相等的空间：

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

环绕对齐

使用 justify-around 工具类在容器主轴上对齐项目，使每个项目的两侧都有相等的空间：

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

均匀对齐

使用 justify-evenly 工具类在容器主轴上对齐项目，使每个项目周围有相等的空间，但同时也考虑到使用 justify-around 时通常会在每个项目之间看到的双倍空间：

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

拉伸对齐

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

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

正常对齐

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

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

响应式设计

Prefix a justify-content utility with a breakpoint variant like md: to only apply the utility at medium screen sizes and above:

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

Learn more about using variants in the variants documentation.