Flexbox & Grid
用于控制单个网格项目如何沿其行内轴线对齐的工具类。
类名 | 样式 |
---|---|
justify-self-auto | justify-self: auto; |
justify-self-start | justify-self: start; |
justify-self-center | justify-self: center; |
justify-self-center-safe | justify-self: safe center; |
justify-self-end | justify-self: end; |
justify-self-end-safe | justify-self: safe end; |
justify-self-stretch | justify-self: stretch; |
使用 justify-self-auto
工具类基于网格 justify-items
属性的值来对齐项目
<div class="grid justify-items-stretch ..."> <!-- ... --> <div class="justify-self-auto ...">02</div> <!-- ... --></div>
使用 justify-self-start
工具类将网格项目对齐到其行内轴线的起点
<div class="grid justify-items-stretch ..."> <!-- ... --> <div class="justify-self-start ...">02</div> <!-- ... --></div>
使用 justify-self-center
或 justify-self-center-safe
工具类将网格项目沿其行内轴线的中心对齐
调整容器大小以查看对齐行为
justify-center-end
justify-self-center-safe
<div class="grid justify-items-stretch ..."> <!-- ... --> <div class="justify-self-center ...">02</div> <!-- ... --></div>
<div class="grid justify-items-stretch ..."> <!-- ... --> <div class="justify-self-center-safe ...">02</div> <!-- ... --></div>
当没有足够的可用空间时,justify-self-center-safe
工具类会将项目对齐到容器的起点而不是终点。
使用 justify-self-end
或 justify-self-end-safe
工具类将网格项目对齐到其行内轴线的终点
调整容器大小以查看对齐行为
justify-self-end
justify-self-end-safe
<div class="grid justify-items-stretch ..."> <!-- ... --> <div class="justify-self-end ...">02</div> <!-- ... --></div>
<div class="grid justify-items-stretch ..."> <!-- ... --> <div class="justify-self-end-safe ...">02</div> <!-- ... --></div>
当没有足够的可用空间时,justify-self-end-safe
工具类会将项目对齐到容器的起点而不是终点。
使用 justify-self-stretch
工具类拉伸网格项目以填充其行内轴线上的网格区域
<div class="grid justify-items-start ..."> <!-- ... --> <div class="justify-self-stretch ...">02</div> <!-- ... --></div>
前缀a justify-self
工具类 使用断点变体,例如 md:
,以仅在中等 及以上屏幕尺寸应用该工具类
<div class="justify-self-start md:justify-self-end ..."> <!-- ... --></div>
在 变体文档 中了解更多关于使用变体的信息。