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)。建议优先使用这个属性,而不是单独写三个分离的属性,因为浏览器会推算相关值。
基于个人的理解,希望指正。