实现栅格系统布局的方式
- 【栅格布局的三种主要实现方式原理分析】纯伸缩flex布局,实例如下:
html:
col-6 col-6 col-6 col-6 col-6 col-6 col-6 col-6
css:
.row{ display:flex; flex-wrap:wrap; } .col-6{ flex:0 0 25%; }
实现栅格系统布局的方式
col-6
col-6
col-6
col-6
col-6
col-6
col-6
col-6
.row{
display:flex;
flex-wrap:wrap;
}
.col-6{
flex:0 0 25%;
}