justify-content

示例(Examples)

¥Examples

开始(Start)

¥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)

¥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)

¥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)

¥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)

¥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)

¥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)

¥Stretch

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

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

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

普通(Normal)

¥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)

¥Responsive design

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

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

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