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

我正在尝试创建一个四列布局，其中每列随着窗口的大小而增大和缩小，但每列都有最小宽度，当窗口太小而无法将所有四列放入单行时，它会转换到单个列，每个部分占据整个宽度。

我无法使用 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 https://codepen.io/WriterState/pen/oRKxMj

媒体查询很棒，但它们并不总是可行的替代品容器查询 https://alistapart.com/article/container-queries-once-more-unto-the-breach/（遗憾的是不存在）。

使用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接手。

如果您使用的是弹性盒那么width也可以是flex-basis.

Source: https://www.sitepoint.com/responsive-css-patterns-without-media-queries/ https://www.sitepoint.com/responsive-css-patterns-without-media-queries/