CSS传统布局一般都是基于盒状模型,有例如div+CSS,利用positon, float等布局,灵活性较高,但对于一些特殊布局(垂直居中)实现起来相当麻烦。
flex弹性布局较好的解决了这个问题,同时flex的兼容性也相当不错,除了IE8.9以及其他浏览器一些低版本之外,基本上兼容现在主流的浏览器,如果没有特别需要保证IE的兼容性可以放心使用。
flex是一维布局,即行列同时只能操作一个的,具体用法可参照:阮一峰Flex布局教程
Grid布局与flex布局有类似的部分,建议学完flex布局再学习Grid,与flex不同的是Grid是基于网格的二维布局,可以同时处理行与列,将子元素看作网格元素进行处理,可以简单的实现一些主流布局。
但是,Grid的兼容性却是一个较大的问题,从图中可以看到,大部分浏览器的低版本都无法兼容Grid,所以Grid的工程使用需要谨慎。
与flex类似,在Grid中也有容器(Container)与项目(item)概念,对应父容器和子元素,下面简单总结Grid的相关用法:
一、容器属性
设置Grid布局:
//指定一个容器采用网格布局,作为块级元素
div{
display:grid;
}
//指定一个容器采用网格布局,作为行内元素
div{
display:inline-grid;
}
划分行列:
//grid-template-colunms表示列
//grid-template-rows表示行
//划分了4个高宽各为30px的方块,除了px等长度单位也可以用百分比
.container{
display:grid;
grid-template-colunms:30px 30px;
grid-template-rows:30px 30px;
}
//repeat()
//第一个参数表示重复的次数,第二个参数表示要重复的值
.container{
display:grid;
grid-template-columns:repeat(2,50%);
grid-template-rows:repeat(2,100px 50