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