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

Posted 2023-03-05

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

【英文标题】：Make elements in flex-box take up dynamic amount of space (50% if two elements, 33% if three etc) [duplicate]

【发布时间】：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"  />
      </a>
      % else %
      <a href="p.link" target="_blank" rel="noopener">
        <img src="p.image_url"  />
        <img src="% static 'media/discount.png' %"  />
      </a>
      
      % endif %
    </div>

【问题讨论】：

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

【参考方案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>