-1

I want to show my items in a grid system which has equal areas between items per row. I used space-between and it works but when i have odd number of items, the last items (last row) should be on the left not space between. I got red boxes on the picture below, but i want white ones.

-

Temani Afif
  • 245,468
  • 26
  • 309
  • 415
chnselim
  • 244
  • 1
  • 3
  • 16

1 Answers1

-1

See the Following code 

.parent{
 display:flex;
 flex-flow: row wrap;
 }
 .child{
 height:50px;
 background:purple;
 flex-basis:10%;
 margin:20px;
 }
<div class="parent">
 <div class="child"></div>
 <div class="child"></div>
 <div class="child"></div>
 <div class="child"></div>
 <div class="child"></div>
 <div class="child"></div>
 <div class="child"></div>
 <div class="child"></div>
 <div class="child"></div>
 <div class="child"></div>
 <div class="child"></div>
 <div class="child"></div>
 <div class="child"></div>
</div>
sara moghanam
  • 115
  • 1
  • 5
  • Thanks but the left and the right of the page gap are not equal on this draft. Parent class has to be align center always and odd children have to start left. – chnselim Nov 25 '18 at 13:26
  • This because of the 20px margin I reached what you want but with display grid you can see it at https://codepen.io/moghanam/pen/aQKdWr – sara moghanam Nov 25 '18 at 14:31