css - 像 CSS 中的弹性项目一样收缩网格项目
问题描述
是否可以像 CSS 中的弹性项目一样缩小网格项目?
网格项目
.container {
display: grid;
grid-gap: 10px;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
}
.child {
display: flex;
flex-flow: row wrap;
align-items: center;
justify-content: center;
padding: 5px;
border: 3px solid #a07;
}
<div class="container">
<div class="child">
text
</div>
<div class="child">
text
</div>
<div class="child">
text
</div>
<div class="child">
text
</div>
<div class="child">
text
</div>
</div>
弹性物品
.container {
display: flex;
margin-left: -10px;
flex-flow: row wrap;
}
.child {
display: flex;
flex-flow: row wrap;
align-items: center;
justify-content: center;
padding: 5px;
border: 3px solid #a07;
flex: 200px 1 1;
margin-left: 10px;
margin-bottom: 10px;
}
<div class="container">
<div class="child">
text
</div>
<div class="child">
text
</div>
<div class="child">
text
</div>
<div class="child">
text
</div>
<div class="child">
text
</div>
</div>
简而言之,我可以使用上面的 flex 对元素进行以下定位:
虽然我无法通过使用网格布局来实现相同的行为。Flex 布局允许项目在小屏幕上缩小,而网格布局不允许。同时,我想保留这样的行为,即只有在这样的放置之后,每个项目都不会短于特定大小(在我们的例子中为 200 像素),该项目才会与另一个项目一起移动到下一行。
我正在使用网格布局,因为它允许保留所有子项的宽度相同的不变量。使用 flex 布局,如果最后一个项目单独在行上,它将被拉伸到整行。
解决方案
新解决方案
初始解决方案的优化版本,使用min()
.container {
display: grid;
grid-gap: 10px;
grid-template-columns: repeat(auto-fill, minmax(min(200px,100%), 1fr));
}
.child {
display: flex;
align-items: center;
justify-content: center;
padding: 5px;
border: 3px solid #a07;
}
body {
margin:0;
}
<div class="container">
<div class="child">
text
</div>
<div class="child">
text
</div>
<div class="child">
text
</div>
<div class="child">
text
</div>
<div class="child">
text
</div>
</div>
旧解决方案
max-width
一种解决方案是根据视口单元为子元素指定 a ,因为百分比值与由 定义的轨道大小相关,minmax()
并且不能使用。此解决方案不是通用的,您需要根据每种情况调整值。
例如,在您的情况下,我们可以使用100vw
容器,因为容器是主体中的唯一元素并且占据了整个宽度:
.container {
display: grid;
grid-gap: 10px;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
}
.child {
display: flex;
align-items: center;
justify-content: center;
padding: 5px;
border: 3px solid #a07;
max-width:100vw;
box-sizing:border-box; /* Don't forget this !*/
}
body {
margin:0;
}
<div class="container">
<div class="child">
text
</div>
<div class="child">
text
</div>
<div class="child">
text
</div>
<div class="child">
text
</div>
<div class="child">
text
</div>
</div>
如果有更多元素或一些填充/边距,您需要在max-width
计算中考虑它们:
.container {
display: grid;
grid-gap: 10px;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
}
.child {
display: flex;
align-items: center;
justify-content: center;
padding: 5px;
border: 3px solid #a07;
max-width:calc(100vw - 40px); /*we remove the body margin*/
box-sizing:border-box;
}
body {
margin:0 20px;
}
<div class="container">
<div class="child">
text
</div>
<div class="child">
text
</div>
<div class="child">
text
</div>
<div class="child">
text
</div>
<div class="child">
text
</div>
</div>
就好像我们不再有 2 个约束,而是 3 个:
- 网格单元的最小尺寸为
200px
- 网格单元填充剩余空间
- 网格单元内的元素具有相对于屏幕尺寸定义的最大尺寸。(我们缺少的收缩约束)
推荐阅读
- python-3.x - Python在类中设置一个变量一次
- c++ - 取消引用共享指针并分配给它
- asp.net - IdentityServer4 快速入门问题
- jquery - JSON 在日期时获取元素?
- javascript - 在没有循环的 X 秒后显示/隐藏 Div 系列
- string - Flutter:是否可以仅在传递给文本小部件之前在字符串中格式化(粗体、斜体等)?
- javascript - 将函数签名转换为类型?
- javascript - 链接标签中的样式应适用于整个页面,但不适用于特定的 HTML 元素
- python - 如何从 url 中删除查询字符串?
- javascript - 滚动在三星互联网上不起作用