How to make the flexbox uniform?

Question

I have my CSS like this.There is an unnecesary space appearing in the last row. How to make the flex box Uniform. products1 is the outermost div, catlist1 is the middle one and d1 is the innermost div:-

 .products1{
        position:absolute;
        top:800px;
        padding:50px;
        background: #f2f2f2;
        display:flex;
        margin-left: 15px;
        width: 90%;
    }

    .catlist1{
        flex-wrap: wrap;
        width: 100%;    
        padding:0px;
        display:flex;
    }

    .d1{
        display: block;
        background:white;
        margin-left: auto;
        margin-right: auto;
        background-size: cover; 
        margin: 10px auto;
        width:100px;
        height:25px;
        border:0 solid #dee0e2;
        display: inline;
        padding:50px;
        text-align: center;
        box-shadow: 1px 5px 5px 0 rgba(0,0,0,.3);
    }

And I am getting the output as this:- [![This][1]][1]

HTml:-

<div class="products1">
   <div class="catlist1">
     <div class="d1"></div>
     <div class="d1"></div>
     <div class="d1"></div>
     <div class="d1"></div>
     <div class="d1"></div>
     <div class="d1"></div>
     <div class="d1"></div>
     <div class="d1"></div>
     <div class="d1"></div>
     <div class="d1"></div>
     <div class="d1"></div>
     <div class="d1"></div>
   </div>
</div>

Ok thanks. I don't get wether you need a grid with 4 elements per line or if the elements should wrap depending on the available space. Also, is the number of `.d1` items fixed or variable? — Umbo, Jun 02 '18 at 16:43
All I want is inner divs should have 1.fixed width, and yes 4 elements per line 2.d1 items is variable.The HTML provided is just to give a rough idea @Umbo — hearty, Jun 02 '18 at 16:46

sourcechange · Answer 1 · 2018-06-02T17:39:22.277

1

Out the distance from the auto mode margin: 10px auto; to margin: 3px 3px;

But if you want more precision , use @media screen and

you will have

edited Jun 02 '18 at 17:39

answered Jun 02 '18 at 17:10

sourcechange

75
6

score 1 · Answer 2 · answered Jun 02 '18 at 17:22

The reason is the auto in your margin statement for d1. It centers the element it is applied to, thus it spaces the elements in the last row evenly.

If you want to keep the auto and have the last line appear as the others, then I don't think that's possible without JavaScript or switching to display: grid and media queries for different widths. If you just want to fill the last line and find a different solution for the margins, then add another div with a CSS rule flex-grow: 1 to the end of the catlist div.

score 1 · Accepted Answer · edited Jun 06 '18 at 11:59

change Margin property of d1 class as follows:

.d1 {
        display: block;
        background:white;
        margin-left: auto;
        margin-right: auto;
        background-size: cover; 
        **margin: 10px;**
        width:100px;
        height:25px;
        border:0 solid #dee0e2;
        display: inline;
        padding:50px;
        text-align: center;
        box-shadow: 1px 5px 5px 0 rgba(0,0,0,.3);
}

As margin:10px auto; leads to the left and right margin of each flex-item to auto which leads to uneven left/right margin distribution at last row where number of items is less.

How to make the flexbox uniform?

3 Answers3