css3 易忘屬性

子元素的排列方式（水平或者垂直）
（舊）box-orient：horizontal | vertical | inline-axis | block-axis
（新）flex-direction：row | row-reverse | column | column-reverse

/################################################################################################################################

能夠經過box-orient:horizontal + box-direction:normal 達到新版本 flex-direction:row 的效果；
能夠經過box-orient:horizontal + box-direction:reverse 達到新版本 flex-direction:row-reverse 的效果；
能夠經過box-orient:vertical + box-direction:normal 達到新版本 flex-direction:column 的效果；
能夠經過box-orient:horizontal + box-direction:reverse 達到新版本 flex-direction:column-reverse 的效果；

/################################################################################################################################

子元素的排列順序是否反轉
（舊）box-direction：normal | reverse
（新）無

子元素的對齊方式（左對齊|居中對齊|右對齊|兩邊對齊）
（舊）box-pack：start | center | end | justify
（新）justify-content：flex-start | flex-end | center | space-between | space-around

多行的彈性盒模型 相似justify-content對齊方式 本屬性在只有一行的伸縮容器上沒有效果。
（舊）無
（新）align-content：flex-start | flex-end | center | space-between | space-around | stretch

子元素的對齊方式 box-pack的效果正好（相反）互補
（舊）box-align：start | end | center | baseline | stretch
（新）align-items：flex-start | flex-end | center | baseline | stretch

子元素如何分配其剩餘空間
（舊）box-flex：<number>
（新）flex：none | <' flex-grow '> <' flex-shrink >'? || <' flex-basis '>

/#########################################################################################################################
若是縮寫「flex: 1」, 則其計算值爲「1 1 0%」
若是縮寫「flex: auto」, 則其計算值爲「1 1 auto」
若是「flex: none」, 則其計算值爲「0 0 auto」
若是「flex: 0 auto」或者「flex: initial」, 則其計算值爲「0 1 auto」，即「flex」初始值
/##########################################################################################################################

 

彈性盒的擴展比率
（舊）無
（新）flex-grow：<number>

彈性盒的收縮比率
（舊）無
（新）flex-shrink：<number>

彈性盒伸縮基準值
（舊）無
（新）flex-basis：<length> | <percentage> | auto | content

子元素的所屬組
（舊）box-flex-group：<integer>
（新）無

子元素的顯示順序
（舊）box-ordinal-group：<integer>
（新）order：<integer>

子元素是否能夠換行顯示
（舊）box-lines：single | multiple
（新）flex-wrap：nowrap | wrap | wrap-reverse

 

定義flex子項單獨在側軸（縱軸）方向上的對齊方式
（舊）無
（新）align-self：auto | flex-start | flex-end | center | baseline | stretch

 

子元素排列方式（子元素的排列方向|單行或者多行）
（舊）無
（新）flex-flow：<' flex-direction '> || <' flex-wrap '>

 

 

transform

對象以某個原點進行轉換。
transform-origin：[ <percentage> | <length> | left | center① | right ] [ <percentage> | <length> | top | center② | bottom ]?

某元素的子元素是（看起來）位於三維空間內，仍是在該元素所在的平面內被扁平化。
transform-style：flat | preserve-3d

指定觀察者與「z=0」平面的距離，使具備三維位置變換的元素產生透視效果。「z>0」的三維元素比正常大，而「z<0」時則比正常小，大小程度由該屬性的值決定。
perspective：none | <length>

指定透視點的位置。
perspective-origin：[ <percentage> | <length> | left | center① | right ] [ <percentage> | <length> | top | center② | bottom ]?

指定元素背面面向用戶時是否可見。
backface-visibility：visible | hidden

 

 

 

transition

檢索或設置對象中的參與過渡的屬性。
transition-property：none | <single-transition-property>[ ,<single-transition-property> ]*

過渡的持續時間
transition-duration：<time>[ ,<time> ]*

過渡的動畫類型
transition-timing-function：<single-transition-timing-function>[,<single-transition-timing-function>]*

<single-transition-timing-function> = ease | linear | ease-in | ease-out | ease-in-out | step-start | step-end | steps(<integer>[, [ start | end ] ]?) | cubic-bezier(<number>, <number>, <number>, <number>)

延遲過渡的時間
transition-delay：<time>[ ,<time> ]*

 

animation

對象所應用的動畫名稱，必須與規則@keyframes配合使用，由於動畫名稱由@keyframes定義
animation-name

動畫的持續時間
animation-duration：<time>[,<time>]*

動畫的過渡類型
animation-timing-function：<single-animation-timing-function>[,<single-animation-timing-function>]*

<single-animation-timing-function> = ease | linear | ease-in | ease-out | ease-in-out | step-start | step-end | steps(<integer>[, [ start | end ] ]?) | cubic-bezier(<number>, <number>, <number>, <number>)

動畫的延遲時間
animation-delay：<time>[,<time>]*

動畫的循環次數
animation-iteration-count：<single-animation-iteration-count>[,<single-animation-iteration-count>]*

<single-animation-iteration-count> = infinite | <number>

動畫在循環中是否反向運動
animation-direction：<single-animation-direction>[,<single-animation-direction>]*

<single-animation-direction> = normal | reverse | alternate | alternate-reverse

對象動畫的狀態
animation-play-state：<single-animation-play-state>[,<single-animation-play-state>]*

<single-animation-play-state> = running | paused

動畫時間以外的狀態
animation-fill-mode：<single-animation-fill-mode>[,<single-animation-fill-mode>]*

<single-animation-fill-mode> = none | forwards | backwards | both