justify-content

示例(Examples)

开始(Start)

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

🌐 Use the justify-start utility to justify items against the start of the container's main axis:

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

中心(Center)

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

🌐 Use the justify-center or justify-center-safe utilities to justify items along the center of the container's main axis:

<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 工具将把项目对齐到容器的起始位置，而不是居中。

🌐 When there is not enough space available, the justify-center-safe utility will align items to the start of the container instead of the center.

结尾(End)

使用 justify-end 或 justify-end-safe 工具将项目对齐到容器主轴的末端：

🌐 Use the justify-end or justify-end-safe utilities to justify items against the end of the container's main axis:

<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 工具会将项目对齐到容器的起始位置，而不是末尾。

🌐 When there is not enough space available, the justify-end-safe utility will align items to the start of the container instead of the end.

之间的空间(Space between)

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

🌐 Use the justify-between utility to justify items along the container's main axis such that there is an equal amount of space between each item:

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

周围空间(Space around)

使用 justify-around 工具沿容器的主轴排列项目，使每个项目的两侧都有相等的间距：

🌐 Use the justify-around utility to justify items along the container's main axis such that there is an equal amount of space on each side of each item:

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

空间均匀(Space evenly)

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

🌐 Use the justify-evenly utility to justify items along the container's main axis such that there is an equal amount of space around each item, but also accounting for the doubling of space you would normally see between each item when using justify-around:

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

拉紧(Stretch)

使用 justify-stretch 工具允许自动调整大小的内容项沿容器的主轴填充可用空间：

🌐 Use the justify-stretch utility to allow auto-sized content items to fill the available space along the container's main axis:

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

普通(Normal)

使用 justify-normal 工具将内容项打包到其默认位置，就好像未设置 justify-content 值一样：

🌐 Use the justify-normal utility to pack content items in their default position as if no justify-content value was set:

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

响应式设计(Responsive design)

在 justify-content 工具前面使用断点变体如 md: 仅在 medium 屏幕尺寸及以上时应用工具：

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

请参阅 变体文档 详细了解如何使用变体。