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

我有一组内联块元素（其中4个），全部排列成一排。重新调整窗口的大小时，元素会向下收缩到第二行，依此类推。在浏览器达到最宽的滚动条的最小宽度之前，滚动条不会出现在底部

这是我要找的“扮演小角色”

至于“看起来大”，我希望元素在其线条上占据尽可能多的空间

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

在我尝试实现这一点的过程中，我注意到，包装开始后，用于包含它们的收缩包装div将占据其最大宽度

希望这可以实现适度的黑客免费，但我愿意接受任何建议

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

小提琴中的代码

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

.中心家长{
文本对齐：居中；
背景色：白色；
边框：1px纯黑；
}
.保鲜膜{
显示：内联块；
利润率：0px 12px；
边框：1px纯蓝色；
}
跨度{
显示：内联块；
填充：4px12px；
利润率：6px；
边框：1px纯黑；
}

其他内容

母鸭
第一只鸭子
鸭子2
千斤顶箱

--左右调整大小--

---

非常感谢大家

您可以在容器上使用

display:flex

，并使用

flex:1

设置所有跨度，以填充所有可用空间

*{
框大小：边框框；/*新建：宽度将采用边框和填充*/
}
.中心家长{
文本对齐：居中；
背景色：白色；
边框：1px纯黑；
}
.保鲜膜{
显示：flex；/*新*/
flex-wrap:wrap；/*NEW：如果元素在容器中没有空间，它将使元素转到下一行*/
利润率：0px 12px；
边框：1px纯蓝色；
}
跨度{
flex:1；/*NEW：它将尽可能填满所有可用空间*/
填充：4px12px；
利润率：6px；
边框：1px纯黑；
}

其他内容

母鸭
第一只鸭子
鸭子2
千斤顶箱

--左右调整大小--

您可以在容器上使用

display:flex

，并使用

flex:1

设置所有跨度，以填充所有可用空间

*{
框大小：边框框；/*新建：宽度将采用边框和填充*/
}
.中心家长{
文本对齐：居中；
背景色：白色；
边框：1px纯黑；
}
.保鲜膜{
显示：flex；/*新*/
flex-wrap:wrap；/*NEW：如果元素在容器中没有空间，它将使元素转到下一行*/
利润率：0px 12px；
边框：1px纯蓝色；
}
跨度{
flex:1；/*NEW：它将尽可能填满所有可用空间*/
填充：4px12px；
利润率：6px；
边框：1px纯黑；
}

其他内容

母鸭
第一只鸭子
鸭子2
千斤顶箱

--左右调整大小--

除了@Error404的答案外，如果您希望根据每个项目各自的内容调整其大小和增长/扩展，请使用

flex:1 0 auto


.centerParent{
文本对齐：居中；
背景色：白色；
边框：1px纯黑；
}
.保鲜膜{
显示器：flex；
柔性包装：包装；
利润率：0px 12px；
边框：1px纯蓝色；
}
跨度{
弹性：10自动；
填充：4px12px；
利润率：6px；
边框：1px纯黑；
}


其他内容

母鸭
第一只鸭子
鸭子2
千斤顶箱

--左右调整大小--

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


.centerParent{
文本对齐：居中；
背景色：白色；
边框：1px纯黑；
}
.保鲜膜{
显示器：flex；
柔性包装：包装；
利润率：0px 12px；
边框：1px纯蓝色；
}
跨度{
弹性：10自动；
填充：4px12px；
利润率：6px；
边框：1px纯黑；
}


其他内容

母鸭
第一只鸭子
鸭子2
千斤顶箱

--左右调整大小--