Question

我有一些div应该有最小宽度和最大宽度，并且也是内联块，并且应该始终覆盖100％的屏幕。问题是，我不知道在宽度部分指定什么，以使div总是覆盖100％

例如，如果我有5个div，最大宽度为400，最小宽度为300，覆盖屏幕的20％，当我到达1500px屏幕时，一个div应该下降，但其他div应该保持在300px 。我知道它，因为我指定宽度为20％，但我不知道该怎么做才能使它们自动增长到覆盖100％

当屏幕达到1500px时，我需要div为375px，这意味着它们应该是总宽度的25％，直到屏幕达到1200px，然后重复。

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

        <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;（或简称为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>

如何使用变量ammount内联块div覆盖100％的屏幕？

1 个答案: