Flexbox，如何在400px下保持最少2个cols？
Flexbox，如何在400px下保持最少2个cols？
提问于 2018-06-10 01:06:19
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;
}回答 1
Stack Overflow用户
回答已采纳
发布于 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>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/50776653
复制相关文章
相似问题