大家好，我是IT修真院北京总院Web第27期的学员李浩，一枚正直纯洁善良的菜鸟前端程序猿
今天讲下深度思考中的知识点————Flexbox（弹性盒布局模型）以及适用场景
1.背景介绍
布局的传统解决方案，基于盒状模型，依赖display属性+ position属性+ float属性。
它对于那些特殊布局非常不方便，比如，垂直居中就不容易实现。
2009年，W3C提出了一种新的方案----Flex布局，可以简便、完整、响应式地实现各种页面布局。
目前，它已经得到了所有浏览器的支持，这意味着，现在就能很安全地使用这项功能。(ie10及以上)
Flex是Flexible Box的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。
2.知识剖析
采用Flex布局的元素，称为Flex容器（flex container），简称"容器"。它的所有子元素自动成为容器成员，称为Flex项目（flex item），简称"项目"。
任何一个容器都可以指定成flex布局
行内元素也可以使用Flex布局
容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）。
主轴的开始位置（与边框的交叉点）叫做main start，结束位置叫做main end；交叉轴的开始位置叫做cross start，结束位置叫做cross end。
项目默认沿主轴排列。单个项目占据的主轴空间叫做main size，占据的交叉轴空间叫做cross size。
3.常见问题
flex布局的兼容性
4.解决方案
因为技术在不断的更新，有些旧的浏览器只支持旧语法的书写方式，
所以就出现所谓的兼容性问题。
主流的5大浏览器为Chrome，IE，Firefox，Safari，Opera
@mixin display ($flex) {
display: -webkit-flex; /*新版本语法: Chrome 21+ */
display: -moz-flex; /*老版本语法: Firefox */
display: -ms-flex; /*混合版本语法: IE 10 */
display: -o-flex; /*老版本语法: Opera */
display: flex; /*新版本语法: Opera 12.1, Firefox 22+ */
}
5.扩展思考
lex在圣杯布局中的应用：
圣杯布局（Holy Grail Layout）指的是一种最常见的网站布局。页面从上到下，分成三个部分：头部（header），躯干（body），尾部（footer）。其中躯干又水平分成三栏，从左到右为：导航、主栏、副栏。
6.参考文献
http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html?utm_source=tuicool
http://www.ruanyifeng.com/blog/2015/07/flex-examples.html
以上是阮一峰大神的教程，我觉得很适合初学者看一看，通俗易懂，比较具体化。
感谢阅读
链接: https://pan.baidu.com/s/1jHCzSc2
------------------------------------------------------------------------------------------------------------------------------------------
“我们相信人人都可以成为一个工程师，现在开始，找个师兄，带你入门，掌控自己学习的节奏，学习的路上不再迷茫”。
这里是技能树.IT修真院，成千上万的师兄在这里找到了自己的学习路线，学习透明化，成长可见化，师兄1对1免费指导。快来与我一起学习吧 ！
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。
