0

I used flex box for my container and flex-wrap:wrap but my child divs are becoming uneven.How to fix it?

.container{

    margin: 0 auto;
    flex-wrap: wrap;
    width: 100%;    
    padding:10px;
    display:flex;
}

.child{
    flex:1;  
    margin: 10px;
    vertical-align: center;
    width:100px;
    length:100px;
    border:2px solid gray;
    display: inline;
    float:left;
    padding:65px;
    background-image:;  
    text-align: center;
}

Say like there are 11 child divs and it shows up in three rows. Now the last row displays only the remaining 3 divs out of 11 divs so it stretches those divs horizontally. This is what I am getting

So instead of that I am trying to keep all divs of same size and make the last row divs align center and same size. What to do?

Michael Benjamin
  • 346,931
  • 104
  • 581
  • 701
J.Doe
  • 117
  • 1
  • 1
  • 9

1 Answers1

2

Remove flex:1 and no need to float:left in flex box

  • Also in `.container` style `justify-content: space between;` and `align-items: center;` instead of vertical-align in `.child` –  May 22 '18 at 02:51
  • ok now all same sizes , but how to align it to the center of the container and the last row divs center of container as well? – J.Doe May 22 '18 at 02:52
  • Still aligned left – J.Doe May 22 '18 at 02:54
  • `justify-content: center;` plus a margin on `.child` for even spacing –  May 22 '18 at 04:37