flex布局目前基本上兼容主流的浏览器，且实现方式简单。小H整理了flex的一些知识点，并且总结归纳了几种常见布局的flex写法
flex基础知识点
flex-grow和flex-shrink相关计算公式
- 公式1：子元素空间 < 父容器
父容器剩余空间 = 父容器宽度 - 子元素宽度之和
增长单位 = 父容器剩余空间 / 各子元素flex-grow之和
子元素实际宽度 = (flex-basis) + 增长单位*(flex-grow)
- 公式2：子元素空间 > 父容器
子元素溢出的宽度 = 子元素的宽度之和 - 子元素宽度之和
收缩单位 = 子元素溢出的宽度 / 各子元素flex_shrink之和
计算的子元素的宽度 = (flex-basis) - 收缩单位*(flex-shrink)
flex兼容性
目前flex兼容主流浏览器，对于部分兼容的浏览器可加私有属性：
display:-ms-flex;/* IE10 */
display:-moz-flex;/* Firefox2 ~ Firefox21 */
display:-webkit-flex;
flex bugs
- 在IE10~11浏览器,min-height不适合于flex容器的子元素flex项目。如果可能的话，使用height来替代min-height。
- 在Chrome，Opear和Safari浏览器不识别flex项目内容的最小尺寸。可以设置flex-shrink的值为0（而不是默认的1），以避免不必要的收缩。
- 不使用无单位的flex-basis值，因为在IE10~11中，flex简写被忽略。常使用0%来替代0px。
flex布局应用场景
Flexbox布局比较适合Web应用程序的一些小组件和小规模的布局，而Grid布局更适合用于一些大规模的布局。
flex布局优缺点
- 兼容所有主流浏览器
- 轻松实现元素的水平垂直居中
- 可以忽略内联元素的4px外边距
- 可以简单的实现复杂的布局
推荐阅读
- 大漠：《一个完整的Flexbox指南》
- 阮一峰：《Flex 布局教程》
- Philip Walton和Greg Whitworth收集和整理了有关于Flexbox bugs。
几种常见布局的flex写法
首先要对父元素设置flex布局方式，同时在本案例中，利用媒体查询，当屏幕分辨率小于768px的时候，flex布局变成纵向排列。
- 两列布局
flex-grow定义的是元素的放大比例，默认值为0，表示元素不放大。当给所有子元素赋予flex-grow的值时，该值可以看作是元素尺寸所占父元素的比例。
- 两列布局定宽
flex是flex-grow flex-shrink flex-basis的简写方式。
给第一个子元素赋值flex：1 0 100px;表示该元素在任何情况下的宽度均是固定位100px，不会随着父元素和其他子元素缩放。
第二个子元素的flex-grow为1，则在任何情况下该元素均占满父元素的剩余空间，设置overflow可以防止元素溢出。
- 三列布局
该布局中重点介绍的是order属性，元素的先后排列顺序与order的值对应，order值越大，元素越靠后。
- n列等比布局
注意到第6个子元素的特殊性，我们希望这六个子元素能等宽分布，但是当元素内容过多时，它会占用更多的空间，甚至溢出。
因此对这些元素定义了width:100%;该方法表示所有的元素均占用父元素应有的位置，不因其他兄弟元素内容过多而少分配空间。
- 流式布局
流式布局可适用于自适应布局中，当父元素大小发生改变时，其子元素的大小也随之改变。
该布局的重点属性是flex-wrap:wrap;，如此设置可以使子元素自动换行，防止子元素溢出。
- 水平垂直居中
关键属性为justify-content:center;align-item:center;这是flex布局的一个两点，不需要知道父、子元素任何相关的尺寸信息，便能实现居中布局，灵活性很大。
- 对折线
该案例以及下面的“各种对齐方法”主要是介绍flex中，水平和垂直方向上的的各种对齐方式。
-
各类对齐方式
pic26.png
