Flex布局Div大屏4列展示异常 窗口缩小时换行失效出现横向滚动条

• 横向滚动条问题：父容器.container默认未开启flex-wrap: wrap，flex布局默认不换行，子项.item设置了固定宽度250px，4个子项叠加margin后的总宽度超出容器宽度时，就会撑出横向溢出，触发多余滚动条。
• 小屏无法切换2列问题：第一，媒体查询使用了max-device-width属性，该属性检测的是设备物理屏幕宽度，而非浏览器视口宽度，PC端拖动调整窗口尺寸时不会触发该媒体查询规则；第二，子项写死固定宽度，即使触发换行规则，也无法自动适配2列的宽度占比，达不到预期布局效果。
• 额外隐患：容器使用固定height: 534px，如果后续子项内容增多，会出现内容溢出容器的问题。

• 全局增加盒模型重置规则，避免padding、border参与宽度计算导致的宽度溢出。
• 给.container默认开启flex-wrap: wrap，从根源解决flex子项不换行撑出滚动条的问题，同时将固定高度改为min-height适配内容高度变化。
• 将媒体查询的判断条件从max-device-width改为max-width，适配浏览器窗口尺寸调整的场景。
• 子项放弃固定宽度写法，使用calc()结合百分比宽度实现响应式适配：大屏下每个子项占25%宽度扣除间距，自动排成4列；小屏下每个子项占50%宽度扣除间距，自动排成2列。将子项的margin: 50px auto改为固定左右边距，避免auto计算导致的间距不一致问题。

CSS代码 #

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
.container {
  display: flex;
  width: 100%;
  min-height: 534px;
  flex-wrap: wrap;
}
.item {
  width: calc(25% - 40px);
  position: relative;
  margin: 50px 20px;
}
@media only screen and (max-width: 1080px) {
  .item {
    width: calc(50% - 40px);
  }
}

HTML代码 #

<div class="container">
  <div class="item">1</div>
  <div class="item">1</div>
  <div class="item">1</div>
  <div class="item">1</div>
</div>

如果需要保留子项的最小显示宽度，可以给.item增加min-width: 220px规则，当视口宽度过小导致子项宽度低于阈值时，会自动再次换行适配，不会出现内容挤压变形的问题。

内容的提问来源于stack exchange，提问作者Sam