Flexbox 和 Grid
justify-items
用于控制网格项目如何沿其内联轴对齐的工具。
类 | 样式 |
---|---|
justify-items-start | justify-items: start; |
justify-items-end | justify-items: end; |
justify-items-end-safe | justify-items: safe end; |
justify-items-center | justify-items: center; |
justify-items-center-safe | justify-items: safe center; |
justify-items-stretch | justify-items: stretch; |
justify-items-normal | justify-items: normal; |
示例(Examples)
¥Examples
开始(Start)
¥Start
使用 justify-items-start
工具使网格项目相对于其内联轴的起点对齐:
¥Use the justify-items-start
utility to justify grid items against the start of their inline axis:
<div class="grid justify-items-start ..."><div>01</div><div>02</div><div>03</div><div>04</div><div>05</div><div>06</div></div>
结尾(End)
¥End
使用 justify-items-end
或 justify-items-end-safe
工具将网格项与其行内轴的末端对齐:
¥Use the justify-items-end
or justify-items-end-safe
utilities to justify grid items against the end of their inline axis:
调整容器大小以查看对齐行为
justify-items-end
justify-items-end-safe
<div class="grid grid-flow-col justify-items-end ..."><div>01</div><div>02</div><div>03</div></div>
<div class="grid grid-flow-col justify-items-end-safe ..."><div>01</div><div>02</div><div>03</div></div>
当可用空间不足时,justify-items-end-safe
工具会将项目与容器的起始位置对齐,而不是与容器的结束位置对齐。
¥When there is not enough space available, the justify-items-end-safe
utility will align items to the start of the container instead of the end.
中心(Center)
¥Center
使用 justify-items-center
或 justify-items-center-safe
工具将网格项与其行内轴的末端对齐:
¥Use the justify-items-center
or justify-items-center-safe
utilities to justify grid items against the end of their inline axis:
调整容器大小以查看对齐行为
justify-items-center
justify-items-center-safe
<div class="grid grid-flow-col justify-items-center ..."><div>01</div><div>02</div><div>03</div></div>
<div class="grid grid-flow-col justify-items-center-safe ..."><div>01</div><div>02</div><div>03</div></div>
当可用空间不足时,justify-items-center-safe
工具会将项目与容器的起始位置对齐,而不是与中心对齐。
¥When there is not enough space available, the justify-items-center-safe
utility will align items to the start of the container instead of the center.
拉紧(Stretch)
¥Stretch
使用 justify-items-stretch
工具沿其内联轴拉伸网格项:
¥Use the justify-items-stretch
utility to stretch items along their inline axis:
<div class="grid justify-items-stretch ..."><div>01</div><div>02</div><div>03</div><div>04</div><div>05</div><div>06</div></div>
响应式设计(Responsive design)
¥Responsive design
在 justify-items
工具前面使用断点变体如 md:
仅在 medium 屏幕尺寸及以上时应用工具:
<div class="grid justify-items-start md:justify-items-center ..."> <!-- ... --></div>
请参阅 变体文档 详细了解如何使用变体。