RAM(重复、自动、Minmax)
bookmark_borderbookmark
使用集合让一切井井有条
根据您的偏好保存内容并对其进行分类。
在这第七个示例中,请结合使用您已学到的一些概念来创建包含自动放置的灵活子项的自适应布局。内容非常简洁。这里要记住的关键术语是 repeat
、auto-(fit|fill)
和 minmax()
,它们是 RAM 的首字母缩写。
总体如下所示:
.parent {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}
您再次使用 repeat()
,但这次使用的是 auto-fit
关键字,而不是明确的数值。这样可以自动放置这些子元素。这些子项的基本最小值为 150px
,最大值为 1fr
,这意味着在较小的屏幕上,它们将占据整个 1fr
宽度,当每个子项的宽度达到 150px
时,它们将开始流入同一行。
使用 auto-fit
时,所有完全空的轨道都将合拢为 0
,而填充的轨道将会扩展以占据它们的空间。不过,如果您将此值更改为 auto-fill
,空轨道占用的空间与填充时相同:
.parent {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
}
<div class="parent white">
<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
<div class="box">4</div>
</div>
.parent {
display: grid;
grid-gap: 1rem;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}
如未另行说明,那么本页面中的内容已根据知识共享署名 4.0 许可获得了许可,并且代码示例已根据 Apache 2.0 许可获得了许可。有关详情,请参阅 Google 开发者网站政策。Java 是 Oracle 和/或其关联公司的注册商标。
最后更新时间 (UTC):2023-10-25。
[[["易于理解","easyToUnderstand","thumb-up"],["解决了我的问题","solvedMyProblem","thumb-up"],["其他","otherUp","thumb-up"]],[["没有我需要的信息","missingTheInformationINeed","thumb-down"],["太复杂/步骤太多","tooComplicatedTooManySteps","thumb-down"],["内容需要更新","outOfDate","thumb-down"],["翻译问题","translationIssue","thumb-down"],["示例/代码问题","samplesCodeIssue","thumb-down"],["其他","otherDown","thumb-down"]],["最后更新时间 (UTC):2023-10-25。"],[],[]]