弹性盒与网格
用于同时控制内容如何对齐和分布的工具类。
| Class | Styles |
|---|---|
place-content-center | place-content: center; |
place-content-center-safe | place-content: safe center; |
place-content-start | place-content: start; |
place-content-end | place-content: end; |
place-content-end-safe | place-content: safe end; |
place-content-between | place-content: space-between; |
place-content-around | place-content: space-around; |
place-content-evenly | place-content: space-evenly; |
place-content-baseline | place-content: baseline; |
place-content-stretch | place-content: stretch; |
使用 place-content-center 将项目沿块轴方向居中排列：
<div class="grid h-48 grid-cols-2 place-content-center gap-4 ..."> <div>01</div> <div>02</div> <div>03</div> <div>04</div></div>使用 place-content-start 将元素沿块轴方向向起始端对齐：
<div class="grid h-48 grid-cols-2 place-content-start gap-4 ..."> <div>01</div> <div>02</div> <div>03</div> <div>04</div></div>使用 place-content-end 将项目沿块轴末端对齐：
<div class="grid h-48 grid-cols-2 place-content-end gap-4 ..."> <div>01</div> <div>02</div> <div>03</div> <div>04</div></div>使用 place-content-between 在块轴上均匀分布网格项，使块轴上每行之间的间距相等：
<div class="grid h-48 grid-cols-2 place-content-between gap-4 ..."> <div>01</div> <div>02</div> <div>03</div> <div>04</div></div>使用 place-content-around 在块轴上均匀分布网格项，使每行周围有相等的间距：
<div class="grid h-48 grid-cols-2 place-content-around gap-4 ..."> <div>01</div> <div>02</div> <div>03</div> <div>04</div></div>使用 place-content-evenly 在块轴上均匀分布网格项目：
<div class="grid h-48 grid-cols-2 place-content-evenly gap-4 ..."> <div>01</div> <div>02</div> <div>03</div> <div>04</div></div>使用 place-content-stretch 使网格项目沿其网格区域在块轴方向上拉伸：
<div class="grid h-48 grid-cols-2 place-content-stretch gap-4 ..."> <div>01</div> <div>02</div> <div>03</div> <div>04</div></div>Prefix a place-content utility with a breakpoint variant like md: to only apply the utility at medium screen sizes and above:
<div class="grid place-content-start md:place-content-center ..."> <!-- ... --></div>Learn more about using variants in the variants documentation.