flex布局多张图片均分且中间有距离_Grid 网格布局

网页布局的前身今世

近年来，网页布局逐渐趋于统一化。从最初使用position+display+float来实现，到后来bootstrap3提出的栅格化布局，再到如今大厂经常考的Flex布局，每次改进的出发点都是如何减少布局时的工作量。但每一代都有自己的重大缺陷

传统布局	BootStrap3	BootStarp4	Flex
相当精确，但工作量太大选择单位时，跨设备和缩放无法适应而选取百分比又不是很精确	为了兼容IE采用浮动方式实现z-index难以适配	采用了伸缩布局方式无法对局部使用	一维布局，纵向排列问题较大

可见，随着技术的进步，布局问题越来越少了。到Flex的时候，问题基本已经解决的差不多，只需要按照相同思路再设置一个垂直方向即可。在Chrome 57预览版发布时，W3C正式宣布开始支持Grid属性。这是第一个专门为解决布局问题而创建的 CSS 模块

Grid入门

一个典型的文档类网站布局，包括标题栏，主要内容区域，右侧边栏，左侧边栏等，这里以Docker Labs为例