如何使用CSS Flex制作台式机的4列和移动设备的2列？

Question

我正在处理一个页面，该页面有4列用于桌面，而2列用于移动设备，并且我想使用flex，所以请指导我该怎么做

Answer 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/