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

Question

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

3

我想创建一个四列布局，其中每个列随着窗口的大小而增长和缩小，但每个列都有最小宽度，并且当窗口过小无法容纳全部四列时，它将转换为单列布局，每个部分占据整个宽度。

我尝试使用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>

这是一个 CodePen 示例：https://codepen.io/WriterState/pen/oRKxMj

。

- WriterState

1

你不喜欢它们吗？还是你不知道如何正确使用它们？媒体查询是解决这个问题的简单、有效和适当的方法。 - Claire

我不喜欢它们，但却一直在使用它们。只是感觉应该有一个内置的解决方案，可以使用 flex 或 grid 来实现。 - WriterState

可以随意进行谷歌搜索。这里是一个起点：https://css-tricks.com/look-ma-no-media-queries-responsive-layouts-using-css-grid/。确保您考虑了浏览器的支持。我认为媒体查询目前是最好的选择。 - Claire

1

从4列到1列的转换是不可能的，但是从4列到3列、2列和1列的转换可能是可以的，而无需使用媒体查询 :) - kukkuz

媒体查询基于窗口的宽度而不是容器的宽度。如果容器在流式布局中，媒体查询将无法工作。 - Gijs

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Colin Bernays · Answer 1

媒体查询很棒，但它们并不总是容器查询的替代品（可惜容器查询并不存在）。

当您知道将有多少列时，可以使用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/