如何使用 css flex 为桌面制作 4 列，为移动设备制作 2 列？ [关闭]

【问题标题】：How can I make 4 column for desktop and 2 column for mobile using css flex? [closed]如何使用 css flex 为桌面制作 4 列，为移动设备制作 2 列？ [关闭]
【发布时间】：2019-09-14 12:51:43
【问题描述】：

我正在处理一个页面，其中有 4 列桌面版和 2 列移动版，我想为此使用 flex，所以请指导我该怎么做

【问题讨论】：

使用媒体查询，弹性基础和宽度（最小宽度）。你还找过吗？如果是这样，您的代码在哪里？哪个部分不适合您？
请在此处添加有意义的代码和问题描述。发布证明您的问题的Minimal, Complete, and Verifiable example (MCVE) 将帮助您获得更好的答案。谢谢！

标签： css flexbox

【解决方案1】：

您可以在移动设备上将孩子的max-width 更改为 50%。

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.flex-wrapper {
  display: flex;
  flex-wrap: wrap;
}

.flex-wrapper > div {
  width: 100%;
  max-width: 25%;
  padding: 10px;
  border: 1px solid pink;
}

@media only screen and (max-width: 600px) {
  .flex-wrapper > div {
    max-width: 50%;
  }
}

<div class="flex-wrapper">
  <div>Column1</div>
  <div>Column2</div>
  <div>Column3</div>
  <div>Column4</div>
</div>

您可以调整媒体规则中的max-width 以匹配您的首选断点。

这是小提琴：https://jsfiddle.net/kq5ozft3/1/

【讨论】：