如何实现不同尺寸元素自适应填充空间？已尝试inline-block与flex

嘿，我明白你的困扰——用inline-block确实能让元素并排，但没法让最后一个自动占满剩余空间，而你之前试的flex布局其实就是正确方向，只是可能没用到正确的属性而已！

核心思路：用Flex布局的flex: 1属性 #

flex布局天生就是为这种弹性空间分配场景设计的。你只需要给容器设置display: flex，然后让需要占剩余空间的元素加上flex: 1就行，完全不需要固定尺寸或定位，完美适配各种元素尺寸。

具体代码示例 #

<div class="container">
  <div class="item item-1">元素1（任意尺寸）</div>
  <div class="item item-2">元素2（任意尺寸）</div>
  <div class="item item-3">元素3（占剩余空间）</div>
</div>

.container {
  display: flex;
  /* 可选：如果需要元素垂直居中，加align-items: center; */
  gap: 8px; /* 可选：元素间的间隙，替代inline-block的空白问题 */
}

.item {
  /* 前两个元素不用设置flex，保持自身尺寸 */
  padding: 8px;
  border: 1px solid #ccc;
}

.item-3 {
  flex: 1; /* 关键属性：让该元素占据容器剩余的所有空间 */
}

为什么这个方案通用？ #

• 不管前两个元素是固定宽度、自适应内容宽度，flex: 1都会自动计算容器剩余空间并分配给第三个元素
• 完全不需要写死任何像素值，适配各种屏幕尺寸和元素内容变化
• 解决了inline-block自带的空白间隙问题（用gap属性就能轻松设置元素间距）

如果之前你试flex没成功，大概率是没给第三个元素加flex: 1，或者容器的flex属性没设置对。试试上面的代码，肯定能达到你想要的效果！

内容的提问来源于stack exchange，提问作者Mick