Flexbox 和 Grid
place-self
Utilities for controlling how an individual item is justified and aligned at the same time.
类 | 样式 |
---|---|
place-self-auto | place-self: auto; |
place-self-start | place-self: start; |
place-self-end | place-self: end; |
place-self-center | place-self: center; |
place-self-stretch | place-self: stretch; |
示例(Examples)
¥Examples
自动(Auto)
¥Auto
使用 place-self-auto
根据容器的 place-items
属性的值对齐条目:
¥Use place-self-auto
to align an item based on the value of the container's place-items
property:
<div class="grid grid-cols-3 gap-4 ..."><div>01</div><div class="place-self-auto ...">02</div><div>03</div><div>04</div><div>05</div><div>06</div></div>
开始(Start)
¥Start
使用 place-self-start
将项目与两个轴的起点对齐:
¥Use place-self-start
to align an item to the start on both axes:
<div class="grid grid-cols-3 gap-4 ..."><div>01</div><div class="place-self-start ...">02</div><div>03</div><div>04</div><div>05</div><div>06</div></div>
中心(Center)
¥Center
使用 place-self-center
在两个轴的中心对齐一个项目:
¥Use place-self-center
to align an item at the center on both axes:
<div class="grid grid-cols-3 gap-4 ..."><div>01</div><div class="place-self-center ...">02</div><div>03</div><div>04</div><div>05</div><div>06</div></div>
结尾(End)
¥End
使用 place-self-end
将项目对齐到两个轴的末端:
¥Use place-self-end
to align an item to the end on both axes:
<div class="grid grid-cols-3 gap-4 ..."><div>01</div><div class="place-self-end ...">02</div><div>03</div><div>04</div><div>05</div><div>06</div></div>
拉紧(Stretch)
¥Stretch
使用 place-self-stretch
在两个轴上拉伸项目:
¥Use place-self-stretch
to stretch an item on both axes:
<div class="grid grid-cols-3 gap-4 ..."><div>01</div><div class="place-self-stretch ...">02</div><div>03</div><div>04</div><div>05</div><div>06</div></div>
响应式设计(Responsive design)
¥Responsive design
在 place-self
工具前面使用断点变体如 md:
仅在 medium 屏幕尺寸及以上时应用工具:
<div class="place-self-start md:place-self-end ..."> <!-- ... --></div>
请参阅 变体文档 详细了解如何使用变体。