如何更改 flexbox 中图片的大小？

Posted 2023-03-06

【中文标题】如何更改 flexbox 中图片的大小？

【英文标题】：How can I change size of pictures in a flexbox?

【发布时间】：2021-09-30 16:25:36

【问题描述】：

我尝试为我的作品集开发网站。我想做这样的事情：

但我对 Twitter/Instagram 和 Deviantart 的 3 个图标有一些疑问。为了放置这样的图标，我在 html 中使用了 flexbox。目前，我有：

#conteneur 
  display: flex;
  justify-content: space-between;

<div id="conteneur">
  <div class="element1">
    <img src="https://zupimages.net/up/21/29/vbxh.png">
  </div>
  <div class="element2">
    <img src="https://zupimages.net/up/19/51/4gl0.png">
  </div>
  <div class="element3">
    <img src="https://zupimages.net/up/21/29/dbtc.png">
  </div>
</div>

在此处使用 CodePen 进行测试：https://codepen.io/lucbenedet/pen/yLbPMgK

但是正如你所看到的，图片太大了，当我尝试将图片设置为 35px 的大小时：

#conteneur

    display: flex;
    justify-content: space-between; 
    width: 35px;

或

.element1

    width: 35px;

调整大小不起作用...

有人来展示如何做到这一点？

【问题讨论】：

您好，确实可以，但是每张图片之间的空间变小了，好像justify-content: space-between 不工作了？

也许阅读更多关于justify-content 的不同值的信息并熟悉CSS flexbox？ space-between 将在 flex 子元素之间均匀分布所有剩余空间：如果您的父元素非常宽，那么它们当然会分散得很远。试试justify-content: center？

【参考方案1】：

您可以使用以下代码更新您的 CSS。

#conteneur 
  display: flex;
  justify-content: space-between;
  width: 150px;
  padding: 10px;


#conteneur div img 
  width: 35px;
  height: 35px;

<div id="conteneur">
  <div class="element1">
    <img src="https://zupimages.net/up/21/29/vbxh.png">
  </div>
  <div class="element2">
    <img src="https://zupimages.net/up/19/51/4gl0.png">
  </div>
  <div class="element3">
    <img src="https://zupimages.net/up/21/29/dbtc.png">
  </div>
</div>

当你最大化容器的宽度时，你可以在图标之间留一些空间

【参考方案2】：

您可以将 flex-container 上的宽度重置为最大内容（3 个图标不应溢出）并使用 gap 设置它们之间的距离。

您可以将 em 用于间隙和图标的宽度，以获得连贯的渲染。

可能的例子：

#conteneur 
  display: flex;
  width: max-content;
  align-items: center;
  margin: auto;
  gap: 1.6em;


#conteneur div img 
  width: 3em;

<div id="conteneur">
  <div class="element1">
    <img src="https://zupimages.net/up/21/29/vbxh.png">
  </div>
  <div class="element2">
    <img src="https://zupimages.net/up/19/51/4gl0.png">
  </div>
  <div class="element3">
    <img src="https://zupimages.net/up/21/29/dbtc.png">
  </div>
</div>

来自您的代码笔https://codepen.io/gc-nomade/pen/qBmVjBV的可能示例