html - 我如何使用可变 ammount 内联 block div 覆盖 100% 的屏幕？

Question

我有一些 div，它们应该有一个最小宽度和一个最大宽度，并且也是内联 block 并且应该始终覆盖 100% 的屏幕。问题是，我不确定在宽度部分指定什么以使 div 始终覆盖 100%

例如，如果我有 5 个 div，最大宽度为 400，最小宽度为 300，每个覆盖 20% 的屏幕，当我达到 1500px 屏幕时，一个 div 应该下降，但其他 div 应该保持在 300px .我知道这是因为我将宽度指定为 20%，但我找不到如何让它们自动增长以覆盖 100%

当屏幕达到 1500 像素时，我需要每个 div 为 375 像素，这意味着它们应该占总宽度的 25%，直到屏幕达到 1200 像素，然后重复。

我尝试不使用媒体查询，但如果没有其他方法，那么我认为我应该使用。

        <style>
          div{display:inline-block; max-width:400px; min-width:300px; width:20%; height:100px;}
        </style>
        <div style="background:red;">
        </div><!--
      --><div style="background:blue;">
        </div><!--
      --><div style="background:yellow;">
        </div><!--
      --><div style="background:magenta;">
        </div><!--
      --><div style="background:green;">
        </div>
      </body>

Answer 1

您可以在父级和子级上使用 display: flex; set flex-grow: 1; flex-basis: 20%(或简称 flex: 1 0 20%;)所以它们会“增长”以填充父宽度并具有 20% 的基本宽度，然后指定 min/max-width

body {
  margin: 0;
}

.flex {
  display: flex;
  flex-wrap: wrap;
}

.flex > div {
  flex: 1 0 20%;
  max-width: 400px;
  min-width: 300px;
  height: 1em;
  background: #222;
  box-sizing: border-box;
  border: 1px solid white;
}

<div class="flex">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>