flebo 详细教程

caniuse

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

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

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

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

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

  2. 仅支持 2012 年的语法

  3. 不支持 flex-wrapflex-flow 属性

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

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

  1. IE11 要加 flex-basis 属性。

  2. 在 IE10 和 IE11, 如果外层元素有min-height但是没有明确的 height 值,而且外层容器 (也就是父元
    素) 的displayflex和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)。建议优先使用这个属性,而不是单独写三个分离的属性,因为浏览器会推算相关值。

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

关键字:flexbox, css3, 元素, flex

版权声明

本文来自互联网用户投稿,文章观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处。如若内容有涉嫌抄袭侵权/违法违规/事实不符,请点击 举报 进行投诉反馈!

立即
投稿

微信公众账号

微信扫一扫加关注

返回
顶部