我想仅使用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;