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
:
<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>
|
上面三個屬性的簡寫
|
*以上<number>不支持負值;
*每個屬性的第一個取值為默認值;
*藍色為多個屬性簡寫模式;
兼容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-item
s
|
|
-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
|
*IE10之前不建議使用,可以嘗試用display:table;
關於Chrome,FireFox舊版本支持:
FireFox:把
-webkit- 換成
-moz- 即可
|
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
|
參考:
兼容多瀏覽器的預定義寫法: