Flex项目的宽度不等

Question

我想仅使用flexbox创建网格系统。

当孩子们没有内容时似乎没有工作。

如下所示，最后一行中的最后一个孩子没有对齐。

＆＃13;

＆＃13;

.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 */

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;