这是一个简单的 CSS,我已设法使其可用于简单的响应式网格(plunker):
.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 的 5 个元素(第一行中的 3 个元素,第二行中的 2 个元素)工作?
最佳答案
将前三个 flex 元素的宽度设置为 33%。
将最后两个 flex 元素的宽度设置为 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%。
关于css - 用于 3-5 个元素的响应式 flexbox 网格,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39736639/