本系列文章为对CSS
中flex
布局与grid
布局的详细介绍,已在GitHub同步更新,如您在阅读过程中发现描述有误或错别字的情况,您可以向本项目提出issus
或Pull Request
。
本系列文章为我在深入研究CSS的布局方式的过程中的一些总结。主要是对于CSS3标准里的flex
布局方式CSS4草案中的grid
布局方式进行一些总结。
git clone https://github.com/xingbofeng/css-grid-flex.git
现今的前端开发中,页面布局主要以基于盒模型的布局方式,也就是常说的div
+css
。
我们通过display
、float
、position
布局页面。
传统页面布局过于繁琐,代码冗余,一些功能不易于简单实现:例如垂直居中、等分宽高等。
关于更多flex
与grid
的思考,可以前往前端未来页面布局发展方向是Flexbox 还是Grid? - 前端开发- 知乎进行探讨。
flex
布局又称弹性盒子
布局,它于2009年提出,并已经进入CSS3标准。现今虽已得到众高端浏览器厂商的支持,但由于IE10以下的用户基数仍然很大,大部分Web开发者并不能够真正在某种程度上大胆尝试这种新型布局理念。
而grid
布局则更加新奇了,甚至说到今天,连chrome这样的现代化浏览器都没有支持它。
那为什么要谈它呢?
grid
布局是2010年由Microsoft
提出的,目前已经成为W3C候选标准。虽然说我们依旧不能够通过正常方式使用这样的布局方式,但我们还是通过浏览器的设置可以看到相关的效果。比如Chrome浏览器中通过chrome://flags
打开Chrome浏览器实验网络平台功能。,将experimental web platform features
选项设置为enable
,这个方法同样适用于 Opera,对于Oprea来说,地址为opera://flags
。
打开后,我们将能够在浏览器中正常使用grid
的布局方式了。
若要在项目当中使用grid
布局方式,则可能需要安装css-grid-polyfill。
感谢以下朋友对本仓库错误的纠正与贡献
本项目采用宽泛的MIT LICENSE,您可以随意转载本项目,只需要保持署名即可。