How to justify content with space-between AND have everything centered?

Question

The best solution would be to use margin: auto; on the flex items horizontal margins as follows:

    .flexbox {
       background-color: pink;
       display: flex;
       justify-content:  space-between;
       flex-wrap: wrap;
    }
    .flex-item {
       width: 175px;
       height: 175px;
       background-color: grey;
       margin: 10px auto;
    }

    <div class="flexbox">
       <div class="flex-item"></div>
       <div class="flex-item"></div>
       <div class="flex-item"></div>
       <div class="flex-item"></div>
       <div class="flex-item"></div>
       <div class="flex-item"></div>
       <div class="flex-item"></div>
    </div>

The only problem might be if the last row would have more than one item but not enough to fill up the whole row, there will be a lot of space between the last row items.

Leave a Comment Cancel reply