资讯专栏INFORMATION COLUMN

弹性布局flex 兼容写法

shiweifu / 2382人阅读

摘要:设置在弹性项目上的属性属性定义项目的排列顺序。属性定义了项目的缩小比例,默认为,即如果空间不足,该项目将缩小。属性允许单个项目有与其他项目不一样的对齐方式,可覆盖属性。

兼容浏览器版本

Chrome 21+

Opera 12.1+

Firefox 22+

Safari 6.1+

IE 10+

浏览器对最新flexbox规范的支持情况:

Chrome 29+

Firefox 28+

Internet Explorer 11+

Opera 17+

Safari 6.1+ (前缀 -webkit-)

Android 4.4+

iOS 7.1+ (前缀 -webkit-)

定义弹性布局盒子

display

display: -webkit-box;  / 老版本语法: Safari,  iOS, Android browser,     older WebKit browsers.  /
display: -moz-box; / 老版本语法: Firefox (buggy) /
display: -ms-flexbox; / 混合版本语法: IE 10 /
display: -webkit-flex; / 新版本 语法: Chrome 21+ /
display: flex; / 新版本语法: Opera 12.1, Firefox 22+ /
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
定义子元素排列

flex-direction

    -webkit-box-orient:vertical;
    -webkit-box-direction:normal;
    -moz-box-orient:vertical;
    -moz-box-direction:normal;
    flex-direction:column;
    -webkit-flex-direction:column;
横向排列布局

justify-content

  -webkit-justify-content:center;
  justify-content:center;
  -moz-box-pack:center;
  -webkit--moz-box-pack:center;
  box-pack:center;
竖向排列布局

align-items

  align-items:center;
  -webkit-align-items:center;
  box-align:center;
  -moz-box-align:center;
  -webkit-box-align:center;
伸缩盒子布局兼容

flex

   box-flex:num;
  -webkit-box-flex:num;
  -moz-box-flex:num;
  flex:num;
  -webkit-flex:num;
汇总
/* flex弹性盒布局兼容性写法样式文件
 * 常用类
 * display__flex
 * flex_direction__column
 * flex_wrap__wrap
 * justify_content__center
 * justify_content__space_between
 * justify_content__space_around
 * align_items__center
 * flex_grow__1
 * flex_shrink__0
*/

/*
    设置在弹性容器上的属性
*/
.display__flex {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}

/*flex-direction属性决定主轴的方向(即项目的排列方向)。*/
.flex_direction__row_reverse {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: reverse;
    -ms-flex-direction: row-reverse;
    flex-direction: row-reverse;
}
.flex_direction__column {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
}
.flex_direction__column_reverse {
    -webkit-box-orient: vertical;
    -webkit-box-direction: reverse;
    -ms-flex-direction: column-reverse;
    flex-direction: column-reverse;
}

/*默认情况下,项目都排在一条线(又称"轴线")上。flex-wrap属性定义,如果一条轴线排不下,如何换行。*/
.flex_wrap__nowrap {
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
}
.flex_wrap__wrap {
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}
.flex_wrap__wrap_reverse {
    -ms-flex-wrap: wrap-reverse;
    flex-wrap: wrap-reverse;
}

/*justify-content属性定义了项目在主轴上的对齐方式。*/
.justify_content__flex_start {
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    justify-content: flex-start;
}
.justify_content__flex_end {
    -webkit-box-pack: end;
    -ms-flex-pack: end;
    justify-content: flex-end;
}
.justify_content__center {
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
}
.justify_content__space_between {
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
}
.justify_content__space_around {
    -ms-flex-pack: distribute;
    justify-content: space-around;
}

/*align-items属性定义项目在交叉轴上如何对齐。*/
.align_items__flex_start {
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: flex-start;
}
.align_items__flex_end {
    -webkit-box-align: end;
    -ms-flex-align: end;
    align-items: flex-end;
}
.align_items__center {
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}
.align_items__baseline {
    -webkit-box-align: baseline;
    -ms-flex-align: baseline;
    align-items: baseline;
}

/*align-content属性定义了多根轴线的对齐方式。如果项目只有一根轴线,该属性不起作用。*/
.align_content__flex_start {
    -ms-flex-line-pack: start;
    align-content: flex-start;
}
.align_content__flex_end {
    -ms-flex-line-pack: end;
    align-content: flex-end;
}
.align_content__center {
    -ms-flex-line-pack: center;
    align-content: center;
}
.align_content__space_between {
    -ms-flex-line-pack: justify;
    align-content: space-between;
}
.align_content__space_around {
    -ms-flex-line-pack: distribute;
    align-content: space-around;
}

/*
    设置在弹性项目上的属性
*/

/*order属性定义项目的排列顺序。数值越小,排列越靠前,默认为0。以下是兼容样式写法示例,可根据需要修改属性值。*/
.order__1 {
    -webkit-box-ordinal-group: 2;
    -ms-flex-order: 1;
    order: 1;
}

/*flex-grow属性定义项目的放大比例,默认为0,即如果存在剩余空间,也不放大。以下是兼容样式写法示例,可根据需要修改属性值。*/
.flex_grow__1 {
    -webkit-box-flex: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
}

/*flex-shrink属性定义了项目的缩小比例,默认为1,即如果空间不足,该项目将缩小。以下是兼容样式写法示例,可根据需要修改属性值。*/
.flex_shrink__0 {
    -ms-flex-negative: 0;
    flex-shrink: 0;
}

/*
    flex-basis属性定义了在分配多余空间之前,项目占据的主轴空间(main size)。浏览器根据这个属性,计算主轴是否有多余空间。它的默认值为auto,即项目的本来大小。
    以下是兼容样式写法示例,可根据需要修改属性值。
*/
.flex_basis__100px {
    -ms-flex-preferred-size: 100px;
    flex-basis: 100px;
}

/*align-self属性允许单个项目有与其他项目不一样的对齐方式,可覆盖align-items属性。默认值为auto,表示继承父元素的align-items属性,如果没有父元素,则等同于stretch。*/
.align_self__flex_start {
    -ms-flex-item-align: start;
    align-self: flex-start;
}
.align_self__flex_end {
    -ms-flex-item-align: end;
    align-self: flex-end;
}
.align_self__center {
    -ms-flex-item-align: center;
    align-self: center;
}
.align_self__baseline {
    -ms-flex-item-align: baseline;
    align-self: baseline;
}
safari
父元素设为display:flex;没有问题,但子元素flex:1这种标注在safari中不能用!子元素使用的话只能设为flex:auto,如果想实现flex:1这种效果,请用:
flex-grow:1;
flex-shrink:1;
flex-basis:0;

这三个拆分的元素代替,flex属性就是上面三个属性的复合简写。

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/114943.html

相关文章

  • 前端布局总结(持续更新)

    摘要:一水平居中直接父集设置优点兼容性好,甚至可以兼容缺点里的文字也会水平居中,可以在添加还原使用定位优点居中元素不会对其他的产生影响缺点属于内容,兼容性存在一定问题,高版本浏览器需要添加一些前缀弹性布局另一种写法缺点低版本浏览器不支持 一.水平居中 (1)直接父集设置text-align:center; .parent{text-align:center;} DEMO 优点...

    Baoyuan 评论0 收藏0
  • 前端布局总结(持续更新)

    摘要:一水平居中直接父集设置优点兼容性好,甚至可以兼容缺点里的文字也会水平居中,可以在添加还原使用定位优点居中元素不会对其他的产生影响缺点属于内容,兼容性存在一定问题,高版本浏览器需要添加一些前缀弹性布局另一种写法缺点低版本浏览器不支持 一.水平居中 (1)直接父集设置text-align:center; .parent{text-align:center;} DEMO 优点...

    Yuanf 评论0 收藏0
  • 如何居中一个元素(终结版)

    摘要:源代码演示利用将要水平排列的块状元素设为,然后在父级元素上设置,达到与上面的行内元素的水平居中一样的效果。 前言 本文主要介绍水平居中,垂直居中,还有水平垂直居中各种办法,思维导图如下: showImg(https://segmentfault.com/img/bVblwhg?w=1334&h=563); 如需本文的思维导图,请猛戳Github个人博客 一、水平居中 1.行内元素水平居...

    Hydrogen 评论0 收藏0
  • 如何居中一个元素(终结版)

    摘要:源代码演示利用将要水平排列的块状元素设为,然后在父级元素上设置,达到与上面的行内元素的水平居中一样的效果。 前言 本文主要介绍水平居中,垂直居中,还有水平垂直居中各种办法,思维导图如下: showImg(https://segmentfault.com/img/bVblwhg?w=1334&h=563); 如需本文的思维导图,请猛戳Github个人博客 一、水平居中 1.行内元素水平居...

    hlcc 评论0 收藏0
  • 如何居中一个元素(终结版)

    摘要:源代码演示利用将要水平排列的块状元素设为,然后在父级元素上设置,达到与上面的行内元素的水平居中一样的效果。 前言 本文主要介绍水平居中,垂直居中,还有水平垂直居中各种办法,思维导图如下: showImg(https://segmentfault.com/img/bVblwhg?w=1334&h=563); 如需本文的思维导图,请猛戳Github个人博客 一、水平居中 1.行内元素水平居...

    Meils 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<