FlexBox標(biāo)準(zhǔn)寫(xiě)法:
container : display: flex | inline-flex; |
說(shuō)明 |
flex-direction: row | column | row-reverse | column-reverse |
元素在容器內(nèi)的排列方向 |
flex-wrap: nowrap | wrap | wrap-reverse |
元素一行或多行顯示 |
flex-flow: <flex-direction> <flex-wrap> default: <row nowrap> |
上面兩個(gè)屬性的簡(jiǎn)寫(xiě) |
justify-content: flex-start | flex-end | center | space-between | space-around |
水平方向上, 元素在容器內(nèi)的分布 |
align-items: stretch | flex-start | flex-end | center | baseline |
垂直方向上, 元素在容器內(nèi)的分布 |
align-content: stretch | flex-start | flex-end | center | space-between | space-around |
在容器內(nèi), 額外的空白部分的分布 |
Container items : |
|
order: <number> 0 |
元素在容器內(nèi)的排列順序 |
align-self: auto | flex-start | flex-end | center | baseline | stretch |
覆蓋align-items的值, 定義自身在垂直方向上的分布 |
flex-grow: <number> 0 |
元素在容器內(nèi)所占空間的伸展 |
flex-shrink: <number> 1 |
元素在容器內(nèi)所占空間的收縮 |
flex-basis: <width> auto |
初始化時(shí), 元素在容器內(nèi)的尺寸 |
flex: <flex-grow> <flex-shrink> <flex-basis> <0 1 auto> |
上面三個(gè)屬性的簡(jiǎn)寫(xiě) |
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 (無(wú)-moz-) |
flex-basis |
-webkit-box: <flex-grow> <flex-shrink> <flex-basis> <1 0 auto> |
flex |
不支持 |
align-self |
【 微信掃一掃 】
