FlexBox標準寫法:
| container : display: flex | inline-flex; | 說明 | 
|  flex-direction: row | column | row-reverse | column-reverse | 元素在容器內的排列方向 | 
| flex-wrap: nowrap | wrap | wrap-reverse | 元素一行或多行顯示 | 
| flex-flow: <flex-direction> <flex-wrap>    default: <row nowrap> | 上面兩個屬性的簡寫 | 
| 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: <number> 0 | 元素在容器內的排列順序 | 
| align-self: auto |  flex-start | flex-end | center | baseline | stretch  | 覆蓋align-items的值,  定義自身在垂直方向上的分布 | 
| flex-grow: <number> 0 | 元素在容器內所占空間的伸展 | 
| flex-shrink: <number> 1 | 元素在容器內所占空間的收縮 | 
| flex-basis: <width> auto | 初始化時, 元素在容器內的尺寸 | 
| flex: <flex-grow> <flex-shrink> <flex-basis>    <0  1  auto> | 上面三個屬性的簡寫 | 
|  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 | 
| 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   (無-moz-) | flex-basis | 
| -webkit-box: <flex-grow> <flex-shrink> <flex-basis>    <1  0  auto> | flex | 
| 不支持 | align-self | 
 
【 微信掃一掃 】