1

I'd like to create a grid system using only flexbox.

It seems to not be working when the children have no content.

As you can see below, the last child in the last row doesn't align.

.flexline {
  display: flex;
}

.flexline.is-full>* {
  flex-grow: 1;
}

.flexline.is-full>.is-taking-2 {
  flex-grow: 2;
}


/* color */

.flexline {
  background-color: rgba(255, 0, 0, 0.12);
  height: 60px;
}

.flexline>* {
  background-color: rgba(0, 128, 0, 0.33);
  margin: 5px;
}


/* /color */
<div class="flexline is-full">
  <div>x</div>
  <div></div>
  <div>x</div>
</div>
<div class="flexline is-full">
  <div>x</div>
  <div class="is-taking-2"></div>
</div>
Michael Benjamin
  • 346,931
  • 104
  • 581
  • 701
tonymx227
  • 5,293
  • 16
  • 48
  • 91
  • The problem is that the first line has 6 horizontal margins, and the second line has four. `6 * 5px = 30px` and `4 * 5px = 20px`. So there is a 10px differential. See the duplicate for a more complete explanation and solutions. – Michael Benjamin Jan 05 '18 at 13:30
  • Ok, so, if I remove the entire margins, the shift will be disappeared ? – tonymx227 Jan 05 '18 at 14:30

0 Answers0