Flexbox（弹性盒布局模型）以及适用场景

这里是修真院前端小课堂，每篇分享文从

【背景介绍】【知识剖析】【常见问题】【解决方案】【编码实战】【扩展思考】【更多讨论】【参考文献】

八个方面深度解析前端知识/技能，本篇分享的是：

【Flexbox（弹性盒布局模型）以及适用场景 】

大家好，我是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/blo...

http://www.ruanyifeng.com/blo...

以上是阮一峰大神的教程，我觉得很适合初学者看一看，通俗易懂，比较具体化。

 

 

感谢阅读

 

PPT

链接: https://pan.baidu.com/s/1jHCzSc2

密码: hpu7