Flex常見屬性補充（字典版）

Flex佈局

Flexible box，彈性佈局，任何元素都支持，行業元素也能夠採用.

.box {
    display: inline-flex; // 行業元素flex
}
複製代碼

webkit內核瀏覽器必須加上-webkit-

.box {
    display: -webkit-flex; // safari
}
複製代碼

容器屬性

flex-direction

決定容器主軸的方向

flex-direction: row(默認) | row-reverse | column | cloumn-reverse
複製代碼

row/row-reverse：水平，起點一左一右
column/cloumn-reverse: 垂直，起點一上一下

flex-wrap

定義換行方式

flex-wrap: nowrap(默認) | wrap | wrap-reverse
複製代碼

nowrap: 不換行
wrap: 換行
wrap-reverse: 換行，自下而上

flex-flow

flex-derection 和 flex-flow，默認row nowrap

flex-flow: [flex-derection] [flex-flow]
複製代碼

justify-content

定義項目在主軸方向的對齊方式

justify-content: flex-start(默認) | flex-end | center | space-between | space-around
複製代碼

flex-start: 左對齊
flex-end： 右對齊
center： 居中對齊
space-between：兩端對其，項目之間間隔相同
sapce-around： 每一個項目兩側的間隔相同

align-items

定義項目在交叉軸（與主軸交叉）上的對其方式

align-items: flex-start | flex-end | center | baseline | stretch（默認）
複製代碼

flex-start: 交叉軸起點對齊
flex-end: 交叉軸終點對齊
flex-center： 交叉軸中點對齊
baseline： 每一個項目的第一行文字基線對齊
stretch： 若是項目未設置高度或者設置的高度爲auto，將佔滿整個交叉軸

align-content

定義擁有多跟軸線的項目對齊方式，若僅有一根軸線，則該屬性不起做用

align-content: flex-start | flex-end | center | space-between | space-around | stretch(默認)
複製代碼

flex-start：交叉軸起點對齊
flex-end： 交叉軸終點對齊
center： 交叉軸中點對齊
space-between：交叉軸兩端對齊，各中心軸間隔相等
space-around: 每根軸線兩端間隔相等
stretch： 軸線沾滿整個交叉軸

項目屬性

order

order定義項目的排列順序，數值越小排列越靠前。

.item {
    order: [integer](默認0)
}
複製代碼

flex-grow

flex-grow定義項目的放大比例，默認爲0，即即便有多餘空間也不放大。

.item {
    flex-grow: [number](默認0)
}
複製代碼

當容器中的每一個項目flex-grow都爲1時，則他們等分剩餘的空間；當某一個flex-grow爲2時，其餘的爲1，則它的剩餘空間時其餘項目的2倍。

flex-shrink

flex-shrink定義項目的縮小比例，默認爲1，即空間不足，項目將縮小。

.item {
    flex-shrink: [number](默認)
}
複製代碼

當一個容器中全部項目的flex-shrink都爲1時，則當容器空間不足時，全部項目將等比縮小。當某一個項目flex-shrink爲0時，其餘爲1，則當空間不足時，該項目不會縮小。

flex-basis

定義項目在主軸上佔的空間。默認爲auto，即按項目原本的大小佔據空間。

.item {
    flex-basis: [length] | auto
}
複製代碼

flex

flex-grow、flex-shrink以及flex-basis的集合

.item {
    flex: [flex-grow] | [flex-shrink] | [flex-basis]
}
複製代碼

align-self

單獨定義項目在交叉軸上的對齊方式，可覆蓋align-item。默認值爲auto，表示繼承父元素的align-item屬性，若是沒有父元素則爲stretch。

.item {
    align-self: auto | flex-start | flex-end | center | baseline | stretch
}
複製代碼