拥抱未来的CSS布局方式：flex与grid布局

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

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

下载本系列文章

  1. 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。

image

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

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

鸣谢

感谢以下朋友对本仓库错误的纠正与贡献

LICENSE

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