flexbox 详细教程

caniuse

flexbox 神器肯定是前端必会的。对于各种布局只要学会 flexbox 那都是 so easy 的事情。要用 flexbox，最先就是看看 caniuse 上浏览器对 flexbox 的兼容性。下面是截图：

图片中 partial support 的左上角的数字

对应下面的意思。具体和访问链接去看,:caniuse 上浏览器对 flexbox 的兼容性.

部分支持的意思是支持旧的规范或者旧的语法

1. 仅支持old flexbox规范和不支持 warp

2. 仅支持 2012 年的语法

3. 不支持 flex-wrap 和 flex-flow 属性

4. 部分支持（partial support）是因为有大量的 bug。

已知的问题，详情见链接的「known issues」:

1. IE11 要加 flex-basis 属性。

2. 在 IE10 和 IE11, 如果外层元素有min-height但是没有明确的 height 值，而且外层容器 (也就是父元
   素) 的display为flex和flex-derection:column, 会导致不能正确计算他们子元素的大小。

3. 当父元素有min-height时，IE11 中子元素不能正确的垂直对齐。

4. IE 10 中, 设置-ms-flex-flow: row wrap 不会换行除非在子元素中设置 display: inline-block

5. firefox 的 button 元素不支持 flexbox

6. IE10:子元素 flex 属性的默认值是 0 0 auto 而不是 1 0 auto

7. Safari, 子元素的百分比高度（不用 flex）不被识别。chrome 类似的 bug 在chrome 51已经修复。

flexbox 的属性介绍：

官方解释：https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Using_CSS_flexible_boxes

http://codepen.io/justd/pen/yydezN (flexbox 各属性 demo，下面只是 demo 的说明。demo 看不懂的时候可以看下面的说明)

父元素 (flex container) 相关属性：

1. flex-direction（指定元素的方向）:

row :子元素按行排列（默认从 main start 开始排）
row-reverse :子元素按行排列并反方向（从 main end 开始排）
column :子元素纵列排（从 cross start 开始排）
column-reverse 从 cross end 开始排

2. flex-wrap(指定元素换行):

nowrap：不换行
wrap:换行
wrap-reverse:换行

3. justify-content(子元素横着对齐方式:看这个效果 flex-wrap 设置为 wrap):

flex-start：flex container 开始的地方
flex-end: flex container 结束的地方
center:靠中间
space-between:向两边
space-around:子元素周围用间隙环绕

4. align-items：（子元素竖着对齐方式）

stretch：拉伸占满整列
flex-start：顶部对齐
flex-end：底部对齐
center：靠中间
baseline：这个的理解看 vertical-align: baseline;

5.align-content 是 justify-content 和 align-items 的综合版 (在纵轴和横轴都实现)：

stretch:横向拉伸，纵向也拉伸
... 其它类似

子元素 (flex item) 相关属性:

1. order:

定义子元素的排列顺序:从小数开始排，默认为 0

2. flex-grow:

定义子元素的放大比例, 相对其它兄弟元素设置的值为基准, 默认为 0

3. flex-shrink：

定义子元素的缩小比例, 默认为 1

4. flex-basis：

定义元素在未分配大小前所占的大小，默认 auto

5. align-self：

允许单个自元素的对齐方式。可与其它子元素不同。区别于父元素定义的对全部子元素起作用。默认值为 auto，表示继承父元素的 align-items 属性，如果没有父元素，则等同于 stretch。属性值含义参考父元素

6. flex:

flex-grow, flex-shrink 和 flex-basis 的简写，默认值为 0 1 auto。后两个属性可选。该属性有两个快捷值：auto (1 1 auto) 和 none (0 0 auto)。建议优先使用这个属性，而不是单独写三个分离的属性，因为浏览器会推算相关值。

基于个人的理解，希望指正。