Flex项目的宽度不等

时间:2018-01-05 10:06:13

标签: css css3 flexbox

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

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

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



.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>
&#13;
&#13;
&#13;

0 个答案:

没有答案