分享一個FlexBox標準及相容寫法速查表-css教學-PHP中文網

分享一個FlexBox標準及相容寫法速查表

高洛峰

發布： 2017-03-16 11:02:32

原創

1245 人瀏覽過

FlexBox標準寫法:

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

概述:

總的來說就是12個屬性;

關於容器的6個,5個單一屬性,分別定義了元素排列的方向, 行, 水平排列, 垂直排列, 空白分佈, 和一個簡寫屬性, 方向,行

關於容器內元素的6個, 5個單一屬性, 分別定義元素的順序, 伸展, 收縮, 初始尺寸, 對齊, 和一個簡寫屬性描述元素尺寸

#元素在容器內的排列順序

#container : #display: flex \| inline-flex;	說明
## flex-direction: row \| column \| row-reverse \| column-reverse	元素在容器內的排列方向
#flex-wrap: nowrap \| wrap \| wrap-reverse	#元素一行或多行顯示
flex-flow#: default:	上面兩個屬性的簡寫
#justify-content: flex-start \| flex-end \| center \| space-between \| space-around	#水平方向上, 元素在容器內的分佈
#align-items: stretch \| flex-start \| flex-end \| center \| baseline	垂直方向上, #元素在容器內的分佈
align-content: stretch \| flex-start \| flex-end \| center \| space-between \| space-around	#在容器內, 額外的空白部分的分佈
Container items :
order:


#問題# 0
##align-self: auto \| flex-start \| flex-end \| center \| baseline \| stretch
	覆蓋align-items的值, 定義自己在垂直方向上的分佈

###########flex -grow###: ### 0######################元素在容器內所佔空間的伸展################################################################################################################## #####################flex-shrink###: ### 1####################################################################################### #######元素在容器內所佔空間的縮略###########################flex-basis###: ### auto######################初始化時, 元素在容器內的尺寸######################################################################################## ############flex:### ######

<0 1 auto>### ##################上面三個屬性的簡寫###################

##*以上不支援負值;

*每個屬性的第一個取值為預設值;

#*藍色為多個屬性簡寫模式;

相容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	對齊內容
#-ms-flex-order :
#-ms-flex-item-align ：伸展 \|開始 \|結束\|中心\|基準	align-self
	- ms-flex :

###############flex : 0 0 自動#################

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

關於Chrome ,FireFox舊版支援:

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

normal | reverse ##:##horizontal | verticalflex-wrapflex-flow:justify -content#-webkit-flex-basis: #-webkit-box

#container : display: -webkit-flexbox \| -webkit-inline-flexbox;
standard (橘色為item屬性) -webkit-box-direction :	#-webkit-box-orient


flex-direction	不支援
	#不支持
-webkit -box-pack	flex-start \| flex-end \| center \| space-between \| space-around
不支援	align-content
-webkit-box-align: stretch \| flex-start \| flex- end \| center \| baseline ######align-items######################## ###-webkit-box-ordinal-group:###########################order###### ##############################-webkit-box-flex###: ### 1## #######	##flex-grow
#-webkit-flex-shrink : 0	# 彈性收縮

自動 ( 無-moz-) ##flex-basis
: <彈性基礎>	##flex

##不支援

##align-self

######################################### # ###### ###### ###### ####### ###### ########################################################################## ########

以上是分享一個FlexBox標準及相容寫法速查表的詳細內容。更多資訊請關注PHP中文網其他相關文章！