[+]文章目录

本系列文章为对CSSflex布局与grid布局的详细介绍,已在GitHub同步更新,如您在阅读过程中发现描述有误或错别字的情况,您可以向本项目提出issusPull Request

本系列文章为我在深入研究CSS的布局方式的过程中的一些总结。主要是对于CSS3标准里的flex布局方式CSS4草案中的grid布局方式进行一些总结。

下载本系列文章

git clone https://github.com/xingbofeng/css-grid-flex.git

为什么想写这系列的博文?

现今的前端开发中,页面布局主要以基于盒模型的布局方式,也就是常说的div+css。 我们通过displayfloatposition布局页面。

传统页面布局过于繁琐,代码冗余,一些功能不易于简单实现:例如垂直居中、等分宽高等。

关于更多flexgrid的思考,可以前往前端未来页面布局发展方向是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

image

打开后,我们将能够在浏览器中正常使用grid的布局方式了。

若要在项目当中使用grid布局方式,则可能需要安装css-grid-polyfill

LICENSE

本项目采用宽泛的MIT LICENSE,您可以随意转载本项目,只需要保持署名即可。