对齐内容

示例

开始

使用 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="grid grid-cols-[4rem_auto_4rem] 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.