使 flex-box 中的元素占用动态空间量（如果两个元素则为 50%，如果三个元素则为 33% 等）[重复]答案

【问题标题】：Make elements in flex-box take up dynamic amount of space (50% if two elements, 33% if three etc) [duplicate]使 flex-box 中的元素占用动态空间量（如果两个元素则为 50%，如果三个元素则为 33% 等）[重复]
【发布时间】：2021-10-12 14:23:47
【问题描述】：

我有一个包含 1,2 或三个图像的容器（取决于一些未知的东西）。

如果有多个图像，那么它们都应该能够并排放入容器中。

我试过设置

.image-wrapper {
    display:flex;
    height: 50%;
    flex-grow: 1;
}
.image-wrapper img{
    width: auto;
    max-height: 100%;
    flex-grow: 1;
}

并认为flex-grow:1 应该做到这一点，但这并不完全奏效。

<div class="image-wrapper">
      {% if p.does_exist %}
      <a href="{{p.link}}" target="_blank" rel="noopener">
        <img src="{{p.image_url}}" alt="image of product produkt" />
      </a>
      {% else %}
      <a href="{{p.link}}" target="_blank" rel="noopener">
        <img src="{{p.image_url}}" alt="Image off produkt" />
        <img src="{% static 'media/discount.png' %}" alt="Discount tag" />
      </a>
      
      {% endif %}
    </div>

【问题讨论】：

这能回答你的问题吗？ Flexbox not giving equal width to elements

标签： html css

【解决方案1】：

Flex grow 指定项目应占用的弹性容器内的可用空间量。

你可以试试这个来实现你所描述的

.image-wrapper {
    display:flex;
    height: 50%;
   justify-content: space-around;
}

【讨论】：

【解决方案2】：

您可以尝试对父级使用flex-wrap:nowrap，并为每个图像分配另一个父级。例如：

.container {display:flex;width:300px;flex-wrap: nowrap;}
.container div img {width:100%}

<div class='container'>
  <div><img src='https://www.google.com/images/srpr/logo11w.png'/></div>
  <div><img src='https://www.google.com/images/srpr/logo11w.png'/></div>
  <div><img src='https://www.google.com/images/srpr/logo11w.png'/></div>
  <div><img src='https://www.google.com/images/srpr/logo11w.png'/></div>
  <div><img src='https://www.google.com/images/srpr/logo11w.png'/></div>
</div>

<div class='container'>
  <div><img src='https://www.google.com/images/srpr/logo11w.png'/></div>
  <div><img src='https://www.google.com/images/srpr/logo11w.png'/></div>
  <div><img src='https://www.google.com/images/srpr/logo11w.png'/></div>
</div>

<div class='container'>
  <div><img src='https://www.google.com/images/srpr/logo11w.png'/></div>
</div>

【讨论】：