Flexbox，如何在 400px 处保持至少 2 列？答案

【问题标题】：Flexbox, how to keep a minimum of 2 cols at 400px?Flexbox，如何在 400px 处保持至少 2 列？
【发布时间】：2018-06-09 17:06:19
【问题描述】：

https://codepen.io/leon-yum/pen/XYpgzj?editors=1100

我正在尝试确保在移动设备（400 像素及以下）上，我的 flexbox 网格坚持 2 列/框。但是无论我做什么，它要么捕捉到 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;
}

【问题讨论】：

标记应该是这样的吗？

标签： html css flexbox flexboxgrid

【解决方案1】：

这是有效的解决方案：https://codepen.io/anon/pen/vrgZVa?editors=1100。您所需要的只是将所有项目放在一个包装器元素中（现在您有 2 个元素），并将 flex-wrap: wrap 属性赋予此包装器。还有一件事要做：给你的项目指定宽度（最好是百分比），如果你给他们width: 50%，那么会有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>

【讨论】：