拥抱未来的CSS布局方式:flex与grid布局
本系列文章为我在深入研究CSS的布局方式的过程中的一些总结。主要是对于CSS3标准里的flex
布局方式CSS4草案中的grid
布局方式进行一些总结。
为什么想写这系列的博文?
现今的前端开发中,页面布局主要以基于盒模型的布局方式,也就是常说的div
+。
我们通过display
、float
、position
布局页面。
传统页面布局过于繁琐,代码冗余,一些功能不易于简单实现:例如垂直居中、等分宽高等。
flex
布局又称弹性盒子
布局,它于2009年提出,并已经进入CSS3标准。现今虽已得到众高端浏览器厂商的支持,但由于IE10以下的用户基数仍然很大,大部分Web开发者并不能够真正在某种程度上大胆尝试这种新型布局理念。
而布局则更加新奇了,甚至说到今天,连chrome这样的现代化浏览器都没有支持它。
准备工作
那为什么要谈它呢?
打开后,我们将能够在浏览器中正常使用grid
的布局方式了。
若要在项目当中使用布局方式,则可能需要安装css-grid-polyfill。
LICENSE
本项目采用宽泛的MIT LICENSE,您可以随意转载本项目,只需要保持署名即可。