https://codepen.io/leon-yum/pen/XYpgzj?editors=1100
我正在努力确保在移动设备(400px及以下)上,我的flexbox网格保持在2个cols / boxes上。然而,无论我做什么,它要么会捕捉到1列,要么每行都会分别保持在3个或4个cols。
宽度应为400px的:
结果:
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;
}
发布于 2018-06-10 01:20:05
这是一个可行的解决方案:https://codepen.io/anon/pen/vrgZVa?editors=1100。您所需要的只是将所有项放入一个包装器元素中(现在您有2个元素),并为该包装器提供flex-wrap: wrap
属性。还有一件事要做:给你的项目指定宽度(最好是百分比),如果你给他们列,那么就会有2列,如果是width: 33%
-3列,依此类推。我没有触及页边距和这么小的东西,只是展示了你所要求的:
.flex-grid {
display: flex;
justify-content: space-between;
margin-bottom: 20px;
flex-wrap: wrap;
}
.flex-grid-thirds .col {
width: 32%;
}
.flex-grid-four .col {
width: 24%;
}
@media (max-width: 400px) {
.flex-grid {
.col {
width: 50%;
}
}
}
* {
box-sizing: border-box;
}
body {
padding: 20px;
}
.flex-grid {
margin: 0 0 20px 0;
}
.col {
background: salmon;
padding: 20px;
}
<div class="flex-grid">
<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 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>
https://stackoverflow.com/questions/50776653
复制相似问题