使用纯CSS实现容器内元素按最大宽度自动适配布局

你需要的效果可以通过Flexbox的属性组合实现，无需JavaScript。核心思路是让元素在不超过最大宽度200px的前提下，自动平分容器宽度，从而在剩余空间足够容纳更多元素时，主动缩小自身宽度来腾出位置。

完整实现代码 #

HTML #

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

CSS #

html {
  height: 100%;
}

body {
  margin: 0;
  width: 100%;
  height: 100%;
}

.container {
  width: 100%;
  height: 100%;
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  background: yellow;
}

.item {
  background: green;
  border: 2px black dashed;
  box-sizing: border-box;
  /* 核心属性 */
  flex: 1 1 0;
  max-width: 200px;
  height: 200px;
}

关键属性解释 #

• flex: 1 1 0：
  • flex-grow: 1：允许元素在空间充足时放大，但受max-width限制，最大不会超过200px。
  • flex-shrink: 1：允许元素在需要时缩小，以腾出空间容纳更多元素。
  • flex-basis: 0：将元素的基准宽度设为0，确保Flexbox平分容器宽度时，完全基于容器空间计算，不受元素自身尺寸影响。
• max-width: 200px：限制元素的最大宽度，保证元素不会超出你预设的200px上限。

这个方案的效果和你提供的JavaScript实现完全一致，且无需监听窗口加载或 resize 事件，纯CSS即可自适应容器宽度变化。

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