Why is the flex-wrap:wrap property causing my divs to get uneven sizes? [duplicate]

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

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.

.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;}

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?