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

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  ##:##horizo​​ntal | 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中文網其他相關文章！