笔记说明
重学前端是程劭非（winter）【前手机淘宝前端负责人】在极客时间开的一个专栏，每天10分钟，重构你的前端知识体系，笔者主要整理学习过程的一些要点笔记以及感悟，完整的可以加入winter的专栏学习【原文有winter的语音】，如有侵权请联系我，邮箱：kaimo313@。
一、介绍
这一篇主要从设计、原理和应用三个方面来学习一下 Flex 布局。
详细的可以看看下面两篇文章：来自阮一峰的网络日志
Flex 布局教程：语法篇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;}复制代码
个人总结
还是移动端用起来舒服。。。听说想要前端进击的话图形学是要深究的。。。
