Flexbox & Grid
用于控制网格项目如何沿其内联轴对齐的实用工具。
类 | 样式 |
---|---|
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; |
使用 justify-items-start
将网格项目与其内联轴的起点对齐
<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>
使用 justify-items-end
将网格项目与其内联轴的末尾对齐
<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>
使用 justify-items-center
将网格项目沿其内联轴居中对齐
<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>
使用 justify-items-stretch
拉伸项目沿其内联轴
<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>
前缀a justify-items
实用工具 带有像 md:
这样的断点变体,以便仅在中等 屏幕尺寸及以上应用此实用工具
<div class="grid justify-items-start md:justify-items-center ..."> <!-- ... --></div>
在变体文档中了解有关使用变体的更多信息。