Can I ensure that all flex items have the same width? Currently, my code looks like this:
.video-container {
background-color: blue;
min-height: 90vh;
display: flex;
flex-wrap: wrap;
}
.video {
flex: 1 0 25%;
}
<div class="video-container">
<video class="video" style="background: red;"></video>
<video class="video" style="background: blue;"></video>
<video class="video" style="background: yellow;"></video>
<video class="video" style="background: green;"></video>
<video class="video" style="background: orange;"></video>
<video class="video" style="background: red;"></video>
</div>
Outcome:
This approach limits each row to a maximum of 4 items before moving to the next row.
Although effective for layouts with 4 or 8 items, it results in uneven widths when there are only 6 items present, with the last two expanding beyond the others.
How can I ensure uniform width for all items?
UPDATE
I realize now that using flex: 0 0 25% addresses the issue mentioned above. However, I also want the items to utilize available space effectively based on the number present:
If there is just 1 item, it should take up the full screen.
For 2 items, they should each take half the space,
And so on, up to 4 items.
In essence, similar to the layout seen in Google Meet.