响应3-5项的柔性箱栅格
响应3-5项的柔性箱栅格
提问于 2016-09-28 01:28:53
下面是我设法使简单响应网格(一个柱塞)可行的简单CSS：
.flex {
display: flex;
flex-direction: column;
flex-wrap: wrap;
}
.flex > * {
flex-grow: 1;
/* drives IE11 crazy for some reason */
/*flex-basis: 0;*/
padding: 20px;
}
@media screen and (min-width: 600px) {
.flex {
flex-direction: row;
}
.flex > * {
flex-basis: calc(50% - 40px);
}
}
@media screen and (min-width: 992px) {
.flex {
flex-direction: row;
}
.flex > * {
flex-basis: calc(25% - 40px);
}
}对于指定的断点，它对4项执行任务：
1+1+1+1 2+2 4.
关于3项：
1+1+1 2+1 3.
它给了我5项：
1+1+1+1+1 2+2+1 4+1
它符合flex-basis，但我想
3+2
最后一个断点。
如何使这个CSS在最后一个断点上作为3+2(第一行中的3项，第二行中的2项)来处理5项？
回答 1
Stack Overflow用户
回答已采纳
发布于 2016-09-28 01:39:25
给前三个弯曲项目的宽度为33%。
最后两个弯曲项目的宽度为50%。
在row wrap容器中，前三项将占用行中的所有空间，将剩余的项强制放到下一行。
@media screen and (min-width: 992px) {
.flex {
flex-direction: row;
}
.flex > *:nth-child(-n + 3) {
flex-basis: calc(33.33% - 40px);
}
.flex > *:nth-last-child(-n + 2) { /* see note below */
flex-basis: calc(50% - 40px);
}
}第二个flex-basis规则可能是可选的(取决于您的布局目标)。您也可以将其设置为flex: 1，甚至可以将其完全排除在外。在所有情况下，这两个div占行的50%。
修正柱塞
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/39736639
复制相关文章
相似问题
腾讯云开发者
