一、介绍
这一篇主要从设计、原理和应用三个方面来学习一下 Flex 布局。
详细的可以看看下面两篇文章：来自阮一峰的网络日志
二、Flex 的设计
Flex排版的核心是display:flex和flex属性，它们配合使用。具有display:flex的元素我们称为flex容器，它的子元素或者盒被称作flex项。
三、Flex 的原理
winter说 Flex 的实现并不复杂，之前winter写过一个基本实现提交给 spritejs 项目，代码可以参考
如何实现一个 Flex 布局？
3.1、第一步：分行
把 flex 项分行，有 Flex 属性的 flex 项可以暂且认为主轴尺寸为 0，所以，它可以一定放进当前行。
3.2、第二步：计算主轴
计算每个 flex 项主轴尺寸和位置。
3.3、第三步：计算交叉轴
计算 flex 项的交叉轴尺寸和位置。
四、Flex 的应用
4.1、垂直居中
<div id="parent"> <div id="child"> </div> </div>
#parent { display:flex; width:300px; height:300px; outline:solid 1px; justify-content:center; align-content:center; align-items:center; } #child { width:100px; height:100px; outline:solid 1px; }
4.2、两列等高
<div class="parent"> <div class="child" style="height:300px;"> </div> <div class="child"> </div> </div> <br/> <div class="parent"> <div class="child" > </div> <div class="child" style="height:300px;"> </div> </div>
.parent { display:flex; width:300px; justify-content:center; align-content:center; align-items:stretch; } .child { width:100px; outline:solid 1px; }
4.3、自适应宽
<div class="parent"> <div class="child1"> </div> <div class="child2"> </div> </div>
.parent { display:flex; width:300px; height:200px; background-color:pink; } .child1 { width:100px; background-color:lightblue; } .child2 { width:100px; flex:1; outline:solid 1px; }
