Make elements in flex-box take up dynamic amount of space (50% if two elements, 33% if three etc)

Question

I have a container which contains either 1,2 or three images (depending on some stuff that is unknow).

If there's multiple images, then they should all be able to fit side-by-side in the container.

I have tried setting

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

and thought the flex-grow:1 should do exactly that, but that does not quite do the trick.

<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>

Does this answer your question? [Flexbox not giving equal width to elements](https://stackoverflow.com/questions/25066214/flexbox-not-giving-equal-width-to-elements) — amirify, Aug 08 '21 at 16:44

score 1 · Answer 1 · answered Aug 08 '21 at 16:47

1

Flex grow dictates what amount of the available space inside the flex container the item should take up.

You can try this to achieve what you are describing

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

answered Aug 08 '21 at 16:47

Mohaimin

664
4
10

score 1 · Answer 2 · answered Aug 08 '21 at 16:54

You can try using flex-wrap:nowrap to the parent and give another parent to every image. For example:

.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>

Make elements in flex-box take up dynamic amount of space (50% if two elements, 33% if three etc)

2 Answers2