四列布局，无需媒体查询即可转换为单列答案

【问题标题】：Four Column Layout that Converts to Single Column without Media Query四列布局，无需媒体查询即可转换为单列
【发布时间】：2019-10-30 11:50:51
【问题描述】：

我正在尝试创建一个四列布局，其中每一列都会随着窗口的大小而增长和缩小，但每一列都有最小宽度，并且当窗口太小而无法容纳所有四列时，它过渡到单个列，每个部分占据整个宽度。

我无法使用 flex-box 或 CSS 网格来做到这一点。我想在没有媒体查询的情况下做到这一点。使用媒体查询可以很容易地解决问题，但我不喜欢它们！

.col {
  width: 100%; 
  display: flex; 
  flex-wrap: wrap;
}

.section {
  margin: 10px 0px 0px 10px;
  min-width: 250px; 
  height: 400px; 
  background-color: gray;
  flex: auto; 
}

<div class="col">
  <div class="section">
  </div>
   <div class="section">
  </div>
   <div class="section">
  </div>
   <div class="section">
  </div>
</div>

还有一个密码笔：https://codepen.io/WriterState/pen/oRKxMj

【问题讨论】：

你不喜欢它们？或者您不知道如何正确使用它们？媒体查询是解决此问题的简单、有效且适当的方法。
我不喜欢它们，但一直在使用它们。感觉应该有一个内置的解决方案，无论是使用 flex 还是 grid。
请随意运行谷歌搜索。这是一个起点：css-tricks.com/…。确保您考虑浏览器支持。我认为媒体查询是目前的发展方向。
不可能从 4 列移动到 1 列，但是从 4 到 3 再到 2 和 1 列可能在没有媒体查询的情况下是可能的 :)
媒体查询是基于窗口的宽度而不是容器的宽度。如果容器在流体布局中，则媒体查询将不起作用。

标签： html css flexbox css-grid

【解决方案1】：

媒体查询很棒，但它们并不总是可以替代container queries（遗憾的是不存在）。

当您知道将有多少列时，可以使用 CSS calc 实现水平到垂直布局的切换。

.child{
   min-width: 25%; /* 100% divide number columns */
   max-width: 100%;
   width: calc((50rem - 100%) * 1000); /* Replace 50rem with size of .parent when you want switch to happen */
}

宽度计算为所需的断点减去父容器的宽度。这要么生成一个负数并应用min-width，要么生成一个大数字，在这种情况下max-width 接管。

如果您使用的是 flex-box，那么 width 也可以是 flex-basis。

来源：https://www.sitepoint.com/responsive-css-patterns-without-media-queries/

【讨论】：