分享一個(gè)FlexBox標(biāo)準(zhǔn)及兼容寫法速查表

來(lái)源：懂視網(wǎng) 責(zé)編：小采時(shí)間：2020-11-27 18:52:28

分享一個(gè)FlexBox標(biāo)準(zhǔn)及兼容寫法速查表

分享一個(gè)FlexBox標(biāo)準(zhǔn)及兼容寫法速查表:FlexBox標(biāo)準(zhǔn)寫法:支持瀏覽器: IE11, Chrome29+, FireFox 20+, Safari加前綴 -webkit-概述:總的來(lái)說(shuō)就是12個(gè)屬性;關(guān)于容器的6個(gè),5個(gè)單一屬性,分別定義了元素排列的方向, 行, 水平排列, 垂直排列, 空白分布, 和一個(gè)簡(jiǎn)寫屬性, 方向,行關(guān)于容器內(nèi)元素的6

推薦度：

點(diǎn)擊下載本文 文檔為doc格式

導(dǎo)讀分享一個(gè)FlexBox標(biāo)準(zhǔn)及兼容寫法速查表:FlexBox標(biāo)準(zhǔn)寫法:支持瀏覽器: IE11, Chrome29+, FireFox 20+, Safari加前綴 -webkit-概述:總的來(lái)說(shuō)就是12個(gè)屬性;關(guān)于容器的6個(gè),5個(gè)單一屬性,分別定義了元素排列的方向, 行, 水平排列, 垂直排列, 空白分布, 和一個(gè)簡(jiǎn)寫屬性, 方向,行關(guān)于容器內(nèi)元素的6

FlexBox標(biāo)準(zhǔn)寫法:

支持瀏覽器: IE11, Chrome29+, FireFox 20+, Safari加前綴 -webkit-

概述:

總的來(lái)說(shuō)就是12個(gè)屬性;

關(guān)于容器的6個(gè),5個(gè)單一屬性,分別定義了元素排列的方向, 行, 水平排列, 垂直排列, 空白分布, 和一個(gè)簡(jiǎn)寫屬性, 方向,行

關(guān)于容器內(nèi)元素的6個(gè), 5個(gè)單一屬性, 分別定義元素的順序, 伸展, 收縮, 初始尺寸, 對(duì)齊, 和一個(gè)簡(jiǎn)寫屬性描述元素尺寸

container : display: flex \| inline-flex;	說(shuō)明
flex-direction: row \| column \| row-reverse \| column-reverse	元素在容器內(nèi)的排列方向
flex-wrap: nowrap \| wrap \| wrap-reverse	元素一行或多行顯示
flex-flow: <flex-direction> <flex-wrap> default: <row nowrap>	上面兩個(gè)屬性的簡(jiǎn)寫
justify-content: flex-start \| flex-end \| center \| space-between \| space-around	水平方向上, 元素在容器內(nèi)的分布
align-items: stretch \| flex-start \| flex-end \| center \| baseline	垂直方向上, 元素在容器內(nèi)的分布
align-content: stretch \| flex-start \| flex-end \| center \| space-between \| space-around	在容器內(nèi), 額外的空白部分的分布
Container items :
order: <number> 0	元素在容器內(nèi)的排列順序
align-self: auto \| flex-start \| flex-end \| center \| baseline \| stretch	覆蓋align-items的值, 定義自身在垂直方向上的分布
flex-grow: <number> 0	元素在容器內(nèi)所占空間的伸展
flex-shrink: <number> 1	元素在容器內(nèi)所占空間的收縮
flex-basis: <width> auto	初始化時(shí), 元素在容器內(nèi)的尺寸
flex: <flex-grow> <flex-shrink> <flex-basis> <0 1 auto>	上面三個(gè)屬性的簡(jiǎn)寫

*以上<number>不支持負(fù)值;

*每個(gè)屬性的第一個(gè)取值為默認(rèn)值;

*藍(lán)色為多個(gè)屬性簡(jiǎn)寫模式;

兼容IE10:加前綴 -ms-

display:-ms-flexbox \| -ms-inline-flexbox;	standard (橙色為item屬性)
-ms-flex-direction : row \| column \| row-reverse \| column-reverse	flex-direction
-ms-flex-wrap : none \| wrap \| wrap-reverse	flex-wrap
不支持	flex-flow
-ms-flex-pack : start \| end \|center \| justify	justify-content
-ms-flex-align : stretch \| start \| end \|center \| baseline	align-items
-ms-flex-line-pack : start \| end \|center \| baseline	align-content
-ms-flex-order : <number>	order
-ms-flex-item-align : stretch \| start \| end \|center \| baseline	align-self
-ms-flex : <positive-flex> <negative-flex> <preferred-size> \|\| none	flex : 0 0 auto

*IE10之前不建議使用,可以嘗試用display:table;

關(guān)于Chrome,FireFox舊版本支持:

FireFox:把 -webkit- 換成 -moz- 即可

container : display: -webkit-flexbox \| -webkit-inline-flexbox;	standard (橙色為item屬性)
-webkit-box-direction: normal \| reverse -webkit-box-orient: horizontal \| vertical	flex-direction
不支持	flex-wrap
不支持	flex-flow
-webkit-box-pack: flex-start \| flex-end \| center \| space-between \| space-around	justify-content
不支持	align-content
-webkit-box-align: stretch \| flex-start \| flex-end \| center \| baseline	align-items
-webkit-box-ordinal-group:<number>	order
-webkit-box-flex: <number> 1	flex-grow
-webkit-flex-shrink: <number> 0	flex-shrink
-webkit-flex-basis: <width> auto (無(wú)-moz-)	flex-basis
-webkit-box: <flex-grow> <flex-shrink> <flex-basis> <1 0 auto>	flex
不支持	align-self

聲明：本網(wǎng)頁(yè)內(nèi)容旨在傳播知識(shí)，若有侵權(quán)等問題請(qǐng)及時(shí)與本網(wǎng)聯(lián)系，我們將在第一時(shí)間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com

分享一個(gè)FlexBox標(biāo)準(zhǔn)及兼容寫法速查表

推薦度：

點(diǎn)擊下載本文 文檔為doc格式

標(biāo)簽： flex 兼容寫法

熱門焦點(diǎn)

做爰高潮a片〈毛片〉,尤物av天堂一区二区在线观看,一本久久A久久精品VR综合,添女人荫蒂全部过程av

分享一個(gè)FlexBox標(biāo)準(zhǔn)及兼容寫法速查表

分享一個(gè)FlexBox標(biāo)準(zhǔn)及兼容寫法速查表

分享一個(gè)FlexBox標(biāo)準(zhǔn)及兼容寫法速查表

最新推薦

猜你喜歡

熱門推薦