HTML - 使行内 block 元素看起来很小，但看起来很大

Question

我有一组行内 block 元素(其中 4 个)，全部排成一排。重新调整窗口大小时，元素换行到第二行，依此类推。在浏览器达到最宽的最小宽度之前，它们不会在底部引起滚动条。

这是我正在寻找的“小 Action ”部分。

至于“看起来很大”，我希望元素看起来在它们的行上占据尽可能多的空间。

我要寻找的最终结果是，当所有四个都位于垂直行中时，它们的宽度都相同 - 即最宽元素的宽度。当一行中有 X 个元素，另一行中有 Y(也许第三行中有 Z？我希望能够随着时间的推移添加更多元素。)，每行中的元素应该展开，以便它们的行与最宽的行。

在我尝试实现此目的时，我注意到一旦开始包装，用于包含它们的收缩包装 div 就会占据其最大宽度。

希望这可以在适度无黑客攻击的情况下实现，但我愿意接受任何建议。

我真的很想避免使用 javascript，但如果需要的话，请不要犹豫。

A Fiddle.

fiddle 中的代码

<style>
.centerParent {
  text-align: center;
  background-color: white;
  border: 1px solid black;
}

.shrinkwrap {
  display: inline-block;
  margin: 0px 12px;
  border: 1px solid blue;
}

span {
  display: inline-block;
  padding: 4px 12px;
  margin: 6px;
  border: 1px solid black;
}
</style>
<!--Master div for centering children-->
<div class="centerParent">
  <p>
    other content
  </p>
  <!-- ShrinkWrap Container -->
  <div class="shrinkwrap">
    <span>MotherDuck</span>
    <span>Duckling The First</span>
    <span>Duck2</span>
    <span>JackInTheBox</span>
  </div>
  <p>
    -- resize left right --
  </p>
</div>

非常感谢大家!

Answer 1

除了@Error404 的回答之外，如果您希望每个元素根据其各自的内容调整大小和增长/扩展，请使用 flex: 1 0 auto;

.centerParent {
  text-align: center;
  background-color: white;
  border: 1px solid black;
}
.shrinkwrap {
  display: flex;
  flex-wrap: wrap;
  margin: 0px 12px;
  border: 1px solid blue;
}
span {
  flex: 1 0 auto;
  padding: 4px 12px;
  margin: 6px;
  border: 1px solid black;
}

<!--Master div for centering children-->
<div class="centerParent">
  <p>
    other content
  </p>
  <!-- ShrinkWrap Container -->
  <div class="shrinkwrap">
    <span>MotherDuck</span>
    <span>Duckling The First</span>
    <span>Duck2</span>
    <span>JackInTheBox</span>
  </div>
  <p>
    -- resize left right --
  </p>
</div>