Question

我有一组内联块元素（其中4个），所有元素排成一排。重新调整窗口大小时，元素将向下包裹到第二行，依此类推。它们不会导致底部的滚动条，直到浏览器达到最宽的最小宽度。

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

至于“看起来很大”，我想要出现的元素，以便在他们的行上占用尽可能多的空间。

我正在寻找的最终结果是，当所有四个都位于垂直行时，它们都是相同的宽度 - 即最宽元素的宽度。当一行中有X个元素时，另一行上有Y（三分之一可能是Z？我希望能够随着时间的推移添加更多元素。），每行上的元素应该扩展，所以它们的行匹配宽度最广泛的一排。

在我尝试实现这一目标的过程中，我注意到收缩包装div意味着包含它们，一旦包装开始就会占用它的最大宽度。

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

我真的很想避免使用javascript，但如果需要，请不要退缩。

A 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

您可以在容器上使用display: flex并使用flex: 1设置所有范围以填充所有可用空间。

＆＃13;

*{
  box-sizing: border-box; /* NEW: the widths will take the borders and paddings on them */
}

.centerParent {
  text-align: center;
  background-color: white;
  border: 1px solid black;
}

.shrinkwrap {
  display: flex; /* NEW */
  flex-wrap: wrap; /* NEW: It will make the element goes to the next line if it does not have space inside the container. */
  margin: 0px 12px;
  border: 1px solid blue;
}

span {
  flex: 1; /* NEW: It will fill all the available space he can. */
  padding: 4px 12px;
  margin: 6px;
  border: 1px solid black;
}

＆＃13;

<!--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>

＆＃13;

Answer 2

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

＆＃13;

.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;
}

＆＃13;

<!--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>

＆＃13;

HTML - 使内联块元素行动小，但看起来很大

2 个答案: