彈性布局flex 兼容寫法

shiweifu 發(fā)布于2019-08-30 11:21 / 2515人閱讀

摘要：設(shè)置在彈性項目上的屬性屬性定義項目的排列順序。屬性定義了項目的縮小比例，默認(rèn)為，即如果空間不足，該項目將縮小。屬性允許單個項目有與其他項目不一樣的對齊方式，可覆蓋屬性。

兼容瀏覽器版本

Chrome 21+

Opera 12.1+

Firefox 22+

Safari 6.1+

IE 10+

瀏覽器對最新flexbox規(guī)范的支持情況：

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
*/

/*
    設(shè)置在彈性容器上的屬性
*/
.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;
}

/*默認(rèn)情況下，項目都排在一條線（又稱"軸線"）上。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;
}

/*
    設(shè)置在彈性項目上的屬性
*/

/*order屬性定義項目的排列順序。數(shù)值越小，排列越靠前，默認(rèn)為0。以下是兼容樣式寫法示例，可根據(jù)需要修改屬性值。*/
.order__1 {
    -webkit-box-ordinal-group: 2;
    -ms-flex-order: 1;
    order: 1;
}

/*flex-grow屬性定義項目的放大比例，默認(rèn)為0，即如果存在剩余空間，也不放大。以下是兼容樣式寫法示例，可根據(jù)需要修改屬性值。*/
.flex_grow__1 {
    -webkit-box-flex: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
}

/*flex-shrink屬性定義了項目的縮小比例，默認(rèn)為1，即如果空間不足，該項目將縮小。以下是兼容樣式寫法示例，可根據(jù)需要修改屬性值。*/
.flex_shrink__0 {
    -ms-flex-negative: 0;
    flex-shrink: 0;
}

/*
    flex-basis屬性定義了在分配多余空間之前，項目占據(jù)的主軸空間（main size）。瀏覽器根據(jù)這個屬性，計算主軸是否有多余空間。它的默認(rèn)值為auto，即項目的本來大小。
    以下是兼容樣式寫法示例，可根據(jù)需要修改屬性值。
*/
.flex_basis__100px {
    -ms-flex-preferred-size: 100px;
    flex-basis: 100px;
}

/*align-self屬性允許單個項目有與其他項目不一樣的對齊方式，可覆蓋align-items屬性。默認(rèn)值為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

父元素設(shè)為display:flex;沒有問題，但子元素flex:1這種標(biāo)注在safari中不能用！子元素使用的話只能設(shè)為flex:auto，如果想實現(xiàn)flex:1這種效果，請用：

flex-grow:1;
flex-shrink:1;
flex-basis:0;

這三個拆分的元素代替，flex屬性就是上面三個屬性的復(fù)合簡寫。

GPU云服務(wù)器云服務(wù)器 flex布局 flex flex40 flex 教程

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/114943.html

發(fā)表評論

登陸后可評論

0條評論

shiweifu

男|高級講師

我要關(guān)注我要私信

TA的文章

基于javaweb+jsp的健身房信息管理系統(tǒng)

閱讀 2063·2021-10-08 10:04
50條有趣的Python一行代碼

閱讀 3091·2021-09-22 10:02
Html/Css/Jquery知識點(diǎn)集錦

閱讀 2244·2019-08-30 15:56
內(nèi)凹樣式的另一個方案－－v-coupon 一款基于 vue 的卡券組件

閱讀 834·2019-08-30 15:54
前端每日實戰(zhàn)：138# 視頻演示如何用純 CSS 創(chuàng)作一張 iPhone 價格信息圖

閱讀 931·2019-08-30 15:54
前端小白徒手搭博客之路

閱讀 1288·2019-08-30 15:53
彈性布局flex 兼容寫法

閱讀 2516·2019-08-30 11:21
如何在零JS代碼情況下實現(xiàn)一個實時聊天功能?

閱讀 3564·2019-08-30 10:56

成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！

彈性布局flex 兼容寫法

相關(guān)文章

前端布局總結(jié)（持續(xù)更新）

如何居中一個元素（終結(jié)版）

如何居中一個元素（終結(jié)版）

如何居中一個元素（終結(jié)版）

發(fā)表評論

0條評論

shiweifu

男|高級講師

TA的文章

基于javaweb+jsp的健身房信息管理系統(tǒng)

50條有趣的Python一行代碼

Html/Css/Jquery知識點(diǎn)集錦

內(nèi)凹樣式的另一個方案－－v-coupon 一款基于 vue 的卡券組件

前端每日實戰(zhàn)：138# 視頻演示如何用純 CSS 創(chuàng)作一張 iPhone 價格信息圖

前端小白徒手搭博客之路