当预定义的大小相同时，如何根据每个图像的大小制作 flexbox 大小？答案

【问题标题】：How to make flexbox size each image according to it's size when their pre-defined size is the same?当预定义的大小相同时，如何根据每个图像的大小制作 flexbox 大小？
【发布时间】：2021-05-12 21:37:29
【问题描述】：

我在问一个看似简单的问题，但我已经坚持了 4 个小时，没有希望。我不确定问题是否出在我设置图像或弹性框设置的方式上。

我在我的项目中使用具有以下设置的图标库：

 @mixin icon($url) {
    height: 4rem;
    width: 4rem;
    max-height: 100%;
    max-width: 100%;
    background: url($url);
    object-fit: contain;
    display: block;
    background-size: contain;
    background-repeat: no-repeat;
}

然后每个图标看起来像这样：

.google-icon {
    @include icon('local address');
}

我正在尝试创建一个包含这些图标的引导卡页脚，以更改顺序。现在，图标的大小并不完全相同，但是如果我删除高度和宽度 flexbox 会将这个空间呈现为 0x0px，所以里面什么都没有显示我想要得到的是这些图像将并排显示，当一个图标小于另一个图标时，不会在两者之间填充。我希望它们在这个页脚中尽可能地被拉伸，而不是从那里延伸或相互重叠。并且它们也位于 Y 轴的中间。

我该怎么做？这是example

编辑：谢谢@Pauli_D 产生这个问题的 HTML 是：

    <div class="card h-100">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
  </div>
  <div class="card-footer d-flex">
      <div>
          <i class="github-icon"></i>
      </div>
      <div>
          <i class="google-icon"></i>
      </div>
      <div>
          <i class="stackoverflow-icon"></i>
      </div>
  </div>
</div>

每个图标都遵循上述 CSS 的不同 url。

无论如何，解决方案是将 display="block" 更改为 display="inline-block"，并放弃 div，将所有图标作为普通图标放入其中。正常的文本行。并且 flexbox no-wrap 行为得到了想要的结果。

【问题讨论】：

寻求代码帮助的问题必须包括在问题本身中重现它所需的最短代码，最好是在堆栈片段中。尽管您已经提供了一个链接，但如果它变得无效，那么您的问题对于未来遇到同样问题的其他 SO 用户将毫无价值。见Something in my website/example doesn't work can I just paste a link。
我看到@Paulie_D 谢谢，我已经设法解决了这个问题。但我会知道未来的

标签： html css twitter-bootstrap

【解决方案1】：

解决方案是将 display="block" 更改为 display="inline-block"，并放弃 div，将所有图标作为普通图标放入其中。正常的文本行。并且 flexbox no-wrap 行为得到了想要的结果。

【讨论】：