彈性布局flex 兼容寫法

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

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

兼容瀏覽器版本

Chrome 21+

Opera 12.1+

Firefox 22+

Safari 6.1+

IE 10+

瀏覽器對(duì)最新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;  / 老版本語(yǔ)法: Safari,  iOS, Android browser,     older WebKit browsers.  /
  display: -moz-box;    / 老版本語(yǔ)法: Firefox (buggy) / 
  display: -ms-flexbox;  / 混合版本語(yǔ)法: IE 10 /
  display: -webkit-flex;  / 新版本           語(yǔ)法： Chrome 21+ /
  display: flex;       / 新版本語(yǔ)法： 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屬性決定主軸的方向（即項(xiàng)目的排列方向）。*/
.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)情況下，項(xiàng)目都排在一條線（又稱"軸線"）上。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屬性定義了項(xiàng)目在主軸上的對(duì)齊方式。*/
.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屬性定義項(xiàng)目在交叉軸上如何對(duì)齊。*/
.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屬性定義了多根軸線的對(duì)齊方式。如果項(xiàng)目只有一根軸線，該屬性不起作用。*/
.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è)置在彈性項(xiàng)目上的屬性
*/

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

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

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

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

/*align-self屬性允許單個(gè)項(xiàng)目有與其他項(xiàng)目不一樣的對(duì)齊方式，可覆蓋align-items屬性。默認(rèn)值為auto，表示繼承父元素的align-items屬性，如果沒(méi)有父元素，則等同于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;沒(méi)有問(wèn)題，但子元素flex:1這種標(biāo)注在safari中不能用！子元素使用的話只能設(shè)為flex:auto，如果想實(shí)現(xiàn)flex:1這種效果，請(qǐng)用：

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

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

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

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/114943.html

發(fā)表評(píng)論

登陸后可評(píng)論

0條評(píng)論

shiweifu

男|高級(jí)講師

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

TA的文章

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

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

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

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

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

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

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

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

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

亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

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

彈性布局flex 兼容寫法

相關(guān)文章

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

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

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

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

發(fā)表評(píng)論

0條評(píng)論

shiweifu

男|高級(jí)講師

TA的文章

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

50條有趣的Python一行代碼

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

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

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

前端小白徒手搭博客之路