Flexbox 和 Grid
align-content
用于控制行在多行弹性和网格容器中的位置的工具。
类 | 样式 |
---|---|
content-normal | align-content: normal; |
content-center | align-content: center; |
content-start | align-content: flex-start; |
content-end | align-content: flex-end; |
content-between | align-content: space-between; |
content-around | align-content: space-around; |
content-evenly | align-content: space-evenly; |
content-baseline | align-content: baseline; |
content-stretch | align-content: stretch; |
示例(Examples)
¥Examples
开始(Start)
¥Start
使用 content-start
将容器中的行打包到横轴的起点:
¥Use content-start
to pack rows in a container against the start of the cross axis:
<div class="grid h-56 grid-cols-3 content-start gap-4 ..."><div>01</div><div>02</div><div>03</div><div>04</div><div>05</div></div>
中心(Center)
¥Center
使用 content-center
在横轴中心的容器中打包行:
¥Use content-center
to pack rows in a container in the center of the cross axis:
<div class="grid h-56 grid-cols-3 content-center gap-4 ..."><div>01</div><div>02</div><div>03</div><div>04</div><div>05</div></div>
结尾(End)
¥End
使用 content-end
将容器中的行打包到横轴的末端:
¥Use content-end
to pack rows in a container against the end of the cross axis:
<div class="grid h-56 grid-cols-3 content-end gap-4 ..."><div>01</div><div>02</div><div>03</div><div>04</div><div>05</div></div>
之间的空间(Space between)
¥Space between
使用 content-between
在容器中分配行,使每行之间的空间相等:
¥Use content-between
to distribute rows in a container such that there is an equal amount of space between each line:
<div class="grid h-56 grid-cols-3 content-between gap-4 ..."><div>01</div><div>02</div><div>03</div><div>04</div><div>05</div></div>
周围空间(Space around)
¥Space around
使用 content-around
在容器中分配行,使每行周围的空间相等:
¥Use content-around
to distribute rows in a container such that there is an equal amount of space around each line:
<div class="grid h-56 grid-cols-3 content-around gap-4 ..."><div>01</div><div>02</div><div>03</div><div>04</div><div>05</div></div>
空间均匀(Space evenly)
¥Space evenly
使用 content-evenly
在容器中分布行,使每个项目周围有相等的空间,但也考虑到使用 content-around
时每个项目之间通常会看到的空间加倍:
¥Use content-evenly
to distribute rows in a container such that there is an equal amount of space around each item, but also accounting for the doubling of space you would normally see between each item when using content-around
:
<div class="grid h-56 grid-cols-3 content-evenly gap-4 ..."><div>01</div><div>02</div><div>03</div><div>04</div><div>05</div></div>
拉紧(Stretch)
¥Stretch
使用 content-stretch
允许内容项沿着容器的横轴填充可用空间:
¥Use content-stretch
to allow content items to fill the available space along the container’s cross axis:
<div class="grid h-56 grid-cols-3 content-stretch gap-4 ..."><div>01</div><div>02</div><div>03</div><div>04</div><div>05</div></div>
普通(Normal)
¥Normal
使用 content-normal
将内容项打包到默认位置,就好像没有设置 align-content
值一样:
¥Use content-normal
to pack content items in their default position as if no align-content
value was set:
<div class="grid h-56 grid-cols-3 content-normal gap-4 ..."><div>01</div><div>02</div><div>03</div><div>04</div><div>05</div></div>
响应式设计(Responsive design)
¥Responsive design
在 align-content
工具前面使用断点变体如 md:
仅在 medium 屏幕尺寸及以上时应用工具:
<div class="grid content-start md:content-around ..."> <!-- ... --></div>
请参阅 变体文档 详细了解如何使用变体。