Flex布局就是“弹性布局”，它可以简便、完整、响应式地实现各种页面布局。引入弹性布局的目的，当页面需要适应不同的屏幕大小确保元素拥有恰当的布局方式，对一个容器中的子元素进行排列、对齐和分配空间。
弹性容器（Flex container）通过设置display属性的值为flex，包含多个弹性子元素(Flex item，很多资料把弹性子元素称为“项目")
关于弹性布局的语法，阮一峰老师的博客（http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html"）比较经典，很多其他博客都是转载自此。
关于弹性布局的实例，阮一峰老师的另外一篇博客（http://www.ruanyifeng.com/blog/2015/07/flex-examples.html）也很经典。
读者如果对flex布局语法不熟悉或者想结合实例来理解flex布局，可以仔细研读以上两个博客。
本文，主要是对典型的页面布局再整理一下，以达到使读者更深入细致地理解flex布局的目的
经典的圣杯布局或双飞翼布局，页面分为头部（HEADER）、躯干（.CONTAINER)、尾部(FOOTER)，其中头部、尾部定高，躯干高度自适应，躯干又分为导航（NAV）、主栏（MAIN)、侧栏(ASIDE)，其中导航和侧栏定宽，主栏的宽度自适应。
以前的传统代码用到了浮动，代码稍显繁琐，其实可以使用flex布局，这样代码更简洁。
典型的页面布局效果图如下：
DOM结构如下：
1 <body> 2 <header>HEADER</header> 3 <div class="container"> 4 <nav>NAV</nav> 5 <main>MAIN</main> 6 <aside>ASIDE</aside> 7 </div> 8 <footer>FOOTER</footer> 9 </body>
以下的CSS代码跟flex布局无关，它能影响背景色、固定高度值、固定宽度值等，读者了解即可，这不是本文的重点。
html{ height: 100%; text-align:center; } body{ margin:0; height:100%; color:red; } header{ height: 120px; background-color: cornflowerblue; } .container{ background-color: #ccc; display: flex; height:calc(100% - 170px); } footer{ height: 50px; background-color: #000; line-height:50px; text-align:center; } nav{ background-color: lightgreen; } main{ background-color:#ccc; } aside{ background-color: orange; }
以下的CSS代码跟flex布局有关
1 .container{ 2 display: flex; 3 flex-direction:row; 4 flex-wrap:nowrap; 5 justify-content:flex-start; 6 align-items:stretch; 7 } 8 9 nav{ 10 flex:0 0 200px; 11 } 12 main{ 13 flex:1; 14 } 15 aside{ 16 flex:0 0 150px; 17 } 18
其中.container是父容器，就是本文所指的“弹性容器(Flex container)”，nav、main、aside是子元素，就是本文所指的“弹性子元素（Flex item)"，或者叫”项目“
弹性容器的属性
1、display:flex 通过这个属性值把.container定义为弹性容器，这个属性是弹性布局中最根本的属性，没有这个属性（以及属性值），其它属性都没有意义。
2、flex-direction:row 表示主轴沿着水平轴方向，这是默认值。
3、flex-wrap：nowrap 表示不换行，无论子元素多少都在一行显示。
4、justify-content:flex-start 子元素在主轴上的对齐方式，本例中main元素自适应，填满剩余空间，所以justify-content无论取什么值，对本例来说，效果都是一样的。
5、align-items:stretch 子元素在交叉轴（和主轴垂直）上的对齐方式，本例中没有指定nav、main、aside的高度，所以拉伸（stretch）到和父元素（弹性容器）一样的高度。
子元素（项目）的属性
nav/aside
flex:0 0 200px/flex:0 0 150px是一种简写形式
相当于：
flex-grow:0 主轴上有剩余空间子元素也不分配
flex-shrink:0 主轴上空间不足子元素也不缩小
flex-basis:200px/150px nav/aside在收缩前的基准值是200px/150px（对于flex-direction：row来说就是宽度）
main
flex:1是快捷键，相当于flex:1 1 0%
即：
flex-grow:1
flex-shrink:1
flex-basis:0%（即：0px）
flex：1表示以0px为基准，自动收缩，这个属性值经常用。
Flex布局和多媒体查询结合，使响应式布局更加简便
/*中等屏幕*/ @media (max-width:992px){ /*主轴沿水平方向，超出空间后换行*/ .container{flex-direction:row;flex-wrap:wrap;} /*nav、aside各占一半宽度*/ nav,aside{flex:0 0 50%;height:200px;} /*main独占一行*/ main{order:1;flex:0 0 100%;} } /*小屏幕*/ @media (max-width:768px){ .container{ display:flex; /*小屏幕时，因为nav、aside、main都独占一行，*/ /*所以主轴设置为沿垂直方向（交叉轴就沿水平方向）*/ flex-direction:column; flex-wrap:nowrap; } nav,aside{ width:100%; /*因为flex-direction:column，所以flex-basis:100px含义就是高度=100px*/ /*固定高度100px*/ flex:0 0 100px; } /*通过order属性，设置显示的先后顺序*/ nav{order:1;} /*flex：1自适应*/ main{flex:1;order:3;} aside{order:2;} }
中等屏幕效果图如下：
小屏幕效果图如下：