flebo 详细教程
caniuse
flexbox 神器肯定是前端必会的。对于各种布局只要学会 flexbox 那都是 so easy 的事情。要用 flexbox，最先就是看看 caniuse 上浏览器对 flexbox 的兼容性。下面是截图：
图片中 partial support 的左上角的数字
对应下面的意思。具体和访问链接去看,:caniuse 上浏览器对 flexbox 的兼容性.
部分支持的意思是支持旧的规范或者旧的语法
仅支持old flexbox规范和不支持 warp
仅支持 2012 年的语法
不支持 flex-wrap 和 flex-flow 属性
部分支持（partial support）是因为有大量的 bug。
已知的问题，详情见链接的「known issues」:
IE11 要加 flex-basis 属性。
在 IE10 和 IE11, 如果外层元素有min-height但是没有明确的 height 值，而且外层容器 (也就是父元
素) 的display为flex和flex-derection:column, 会导致不能正确计算他们子元素的大小。当父元素有min-height时，IE11 中子元素不能正确的垂直对齐。
IE 10 中, 设置-ms-flex-flow: row wrap 不会换行除非在子元素中设置 display: inline-block
firefox 的 button 元素不支持 flexbox
IE10:子元素 flex 属性的默认值是 0 0 auto 而不是 1 0 auto
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)。建议优先使用这个属性，而不是单独写三个分离的属性，因为浏览器会推算相关值。
基于个人的理解，希望指正。
关键字：flexbox, css3, 元素, flex
版权声明
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处。如若内容有涉嫌抄袭侵权/违法违规/事实不符，请点击 举报 进行投诉反馈！
