共计 4563 个字符,预计需要花费 12 分钟才能阅读完成。
兼容浏览器版本
- 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 属性就是上面三个属性的复合简写。
正文完