https://codepen.io/leon-yum/pen/XYpgzj?editors=1100
我试图确保在移动设备(400px 及以下)上,我的 flexbox 网格坚持 2 cols / box。但是无论我做什么,它要么捕捉到 1 列,要么每行分别保持在 3 列或 4 列。
预计宽度为 400 像素:
结果:
HTML
<div class="flex-grid-thirds">
<div class="col">This little piggy went to market.</div>
<div class="col">This little piggy stayed home.</div>
<div class="col">This little piggy had roast beef.</div>
</div>
<div class="flex-grid-four">
<div class="col">This little piggy went to market.</div>
<div class="col">This little piggy stayed home.</div>
<div class="col">This little piggy had roast beef.</div>
<div class="col">This little piggy had roast beef.</div>
</div>
CSS
.flex-grid-thirds,
.flex-grid-four {
display: flex;
justify-content: space-between;
margin-bottom: 20px;
}
.flex-grid-thirds .col {
width: 32%;
}
.flex-grid-four .col {
width: 24%;
}
@media (max-width: 400px) {
.flex-grid-thirds,
.flex-grid-four {
.col {
width: 40%;
}
}
}
* {
box-sizing: border-box;
}
body {
padding: 20px;
}
.flex-grid {
margin: 0 0 20px 0;
}
.col {
background: salmon;
padding: 20px;
}