user1181378 user1181378 - 28 days ago 6
CSS Question

CSS flex last incomplete row items take the width of complete row items

I'm creating a flexbox; a container has a

max-width
, say
max-width = 500px
, and child items each has
min-width: 130px
and
flex-grow: 1
to fill the the whole row space.

Here's the fiddle: https://jsfiddle.net/7wroxkhj/6/

What I want to achieve is, for the last row items to take the same width of preceding items. i.e.: item #7 and item #8 to have the same width of items from 1 to 6.

How can I achieve that?

UPDATE:

JS solutions are welcomed!

Answer Source

You may want to consider something along the lines of invisible flex items at the end of the list.

HTML

<div class="parent">
    <div class="child">1</div>
    <div class="child">2</div>
    <div class="child">3</div>
    <div class="child">4</div>
    <div class="child">5</div>
    <div class="child">6</div>
    <div class="child">7</div>
    <div class="child">8</div>
    <div class="child hidden">9</div>  /* new */
    <div class="child hidden">10</div> /* new */
</div>

CSS

.hidden {
    visibility: hidden;
    height: 0;
    font-size: 0;
    margin: 0 10px;
}

DEMO