Flexbox 和 Grid
justify-items
用于控制网格项目如何沿其内联轴对齐的工具。
类 | 样式 |
---|---|
justify-items-start | justify-items: start; |
justify-items-end | justify-items: end; |
justify-items-center | justify-items: center; |
justify-items-stretch | justify-items: stretch; |
justify-items-normal | justify-items: normal; |
示例(Examples)
¥Examples
开始(Start)
¥Start
使用 justify-items-start
将网格项目对齐其内联轴的起点:
¥Use justify-items-start
to justify grid items against the start of their inline axis:
01
02
03
04
05
06
<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
将网格项目对齐其内联轴的末端:
¥Use justify-items-end
to justify grid items against the end of their inline axis:
01
02
03
04
05
06
<div class="grid justify-items-end ..."><div>01</div><div>02</div><div>03</div><div>04</div><div>05</div><div>06</div></div>
中心(Center)
¥Center
使用 justify-items-center
沿其内联轴对齐网格项:
¥Use justify-items-center
to justify grid items along their inline axis:
01
02
03
04
05
06
<div class="grid justify-items-center ..."><div>01</div><div>02</div><div>03</div><div>04</div><div>05</div><div>06</div></div>
拉紧(Stretch)
¥Stretch
使用 justify-items-stretch
沿其内联轴拉伸项目:
¥Use justify-items-stretch
to stretch items along their inline axis:
01
02
03
04
05
06
<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>
请参阅 变体文档 详细了解如何使用变体。