flex网格布局
平均分布
最简单的网格布局,就是平均分布。在容器里面平均分配空间,跟上面的骰子布局很像,但是需要设置项目的自动缩放
html代码
<!-- 几个元素就几个标签 -->
<div class="Grid">
<div class="Grid-cell">...</div>
<div class="Grid-cell">...</div>
<div class="Grid-cell">...</div>
</div>
css代码
.Grid {
display: flex;
}
/* 平均分布 */
.Grid-cell {
flex: 1;
}
百分比分布
某个网格的宽度为固定的百分比,其余网格平均分配剩余的空间。
html代码
<div class="Grid">
<div class="Grid-cell u-1of4">...</div>
<div class="Grid-cell">...</div>
<div class="Grid-cell u-1of3">...</div>
</div>
css代码
.Grid {
display: flex;
}
.Grid-cell {
flex: 1;
}
.Grid-cell.u-full {
flex: