一、背景介绍
Flexbox 布局(FLexible Box)意在提供一个更为有效的方式来进行布局、对齐和分配一个容器内元素之间的空间，即使他们的大小是未知的或者动态的。
flex布局的主要思想是，让容器能够改变它的子元素的宽度/高度（甚至顺序），从而更好地填充可用的空间（主要是为了适应所有种类的设备和屏幕大小）。
最重要的，flexbox 布局是可以改变方向的。与之相对的是传统布局（block是垂直方向的从上到下，inline是水平方向的从左到右）。虽然他们在页面上表现良好，但是他们缺乏弹性（字面意义上的缺乏弹性）来适应大型的或者复杂的应用（尤其是遇到方向的改变、调整大小、伸展、收缩等等这些情况时）。
二、知识剖析
采用Flex布局的元素，称为Flex容器（flex container），简称"容器"。它的所有子元素自动成为容器成员，称为Flex项目（flex item），简称"项目"。
容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）。主轴的开始位置（与边框的交叉点）叫做main start，结束位置叫做main end；交叉轴的开始位置叫做cross
三、常见问题
栅格布局的用法相信大家都很熟悉了，今天我们主要来探讨容器的padding 15px,行的margin -15px，列的padding 15px为什么要这么来回的使用15px
四、解决方案
五、编码实战
<!DOCTYPE html><html lang="en">
<head>
</head>
<body>
<!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</body>
</html>
六、拓展思考
1.栅格系统是按照12等分来设计的，如果想要5等分怎么做？七、参考文献
参考一：
八、更多讨论
提问1：栅格五等分该怎么办
回答： 将每个元素的宽度设置为百分之20.
提问2：栅格有什么缺点
回答：
提问3：若超出12个栅格会怎么显示？
回答：会在另起一行显示
感谢大家观看！
今天的分享就到这里啦，欢迎大家点赞、转发、留言、拍砖~
获得更多IT技能，请移步官网 点击链接直达：http://www.jnshu.com/login/1/17884272