Flex(Flexible Box)佈局意爲”彈性佈局”,是CSS3最受歡迎的屬性之一,簡潔、快速,爲盒狀模型提供了最大的靈活性。
但是在使用該屬性過程中,我們需要注意兩點:
- Flex屬性在webkit內核的瀏覽器中使用時,必須加上-webkit-前綴。
- 設爲Flex佈局以後,子元素的float、clear和vertical-align屬性將失效。
容器的屬性
Flex具有以下六種容器屬性。
屬性 | 說明 |
---|---|
flex-direction | 決定item的排列方向 |
flex-wrap | 一行排列不下時,item的換行方式 |
flex-flow | flex-direction和flex-wrap的結合,默認爲row nowrap |
justify-content | item在主軸上的對齊方式 |
align-items | 定義項目在交叉軸上如何對齊 |
align-content | 對根軸線的對齊方式,如果項目只有一根軸線,該屬性不起作用 |
flex-direction屬性
flex-direction屬性決定主軸的方向(即項目的排列方向)。
flex-direction: row | row-reverse | column | column-reverse;
它有四種取值:
flex-direction | 說明 |
---|---|
row | 主軸爲水平方向,起點在左端(默認) |
row-reverse | 主軸爲水平方向,起點在右端 |
column | 主軸爲垂直方向,起點在上沿 |
column-reverse | 主軸爲垂直方向,起點在下沿 |
flex-direction屬性
一行排列不下時,item的換行方式。
flex-wrap: nowrap | wrap | wrap-reverse;
它有三種取值:
flex-wrap | 說明 |
---|---|
nowrap | 一行排列,不換行(默認) |
wrap | 換行,第一行在上方 |
wrap-reverse | 換行,第一行在下方 |
nowrap
wrap
wrap-reverse
flex-flow屬性
flex-flow屬性是flex-direction屬性和flex-wrap屬性的簡寫形式,默認值爲row nowrap。
使用結合flex-direction屬性和flex-wrap屬性,如:row wrap|column wrap-reverse等。
flex-flow: row nowrap;
justify-content屬性
justify-content屬性定義了項目在主軸上的對齊方式。
justify-content: flex-start | flex-end | center | space-between | space-around;
有五種取值:
justify-content | 說明 |
---|---|
flex-start | 左對齊 |
flex-end | 右對齊 |
center | 居中 |
space-between | 兩端對齊,項目之間的間隔都相等 |
space-around | 每個項目兩側的間隔相等。所以,項目之間的間隔比項目與邊框的間隔大一倍 |
align-items屬性
align-items屬性定義項目在交叉軸上如何對齊。
align-items: flex-start | flex-end | center | baseline | stretch;
有五種取值:
align-items | 說明 |
---|---|
flex-start | 交叉軸的起點對齊 |
flex-end | 交叉軸的終點對齊 |
center | 交叉軸的中點對齊 |
space-between | 項目的第一行文字的基線對齊 |
space-around | 如果項目未設置高度或設爲auto,將佔滿整個容器的高度(默認值) |
align-items屬性
align-content屬性定義了多根軸線的對齊方式。如果項目只有一根軸線,該屬性不起作用。
align-content: flex-start | flex-end | center | space-between | space-around | stretch;
有六種取值:
align-content | 說明 |
---|---|
flex-start | 交叉軸的起點對齊 |
flex-end | 交叉軸的終點對齊 |
center | 交叉軸的中點對齊 |
space-between | 與交叉軸兩端對齊,軸線之間的間隔平均分佈 |
space-around | 每根軸線兩側的間隔都相等。所以,軸線之間的間隔比軸線與邊框的間隔大一倍 |
stretch | 軸線佔滿整個交叉軸(默認值) |
項目的屬性
Flex具有以下六種項目屬性。
屬性 | 說明 |
---|---|
order | order屬性定義項目的排列順序。數值越小,排列越靠前,默認爲0。 |
flex-wrap | 定義項目的放大比例,默認爲0,即如果存在剩餘空間,也不放大。 |
flex-shrink | 項目的縮小比例,默認爲1,即如果空間不足,該項目將縮小。 |
flex-basis | i項目佔據的主軸空間 |
flex | flex-grow, flex-shrink 和 flex-basis的簡寫,默認值爲0 1 auto。後兩個屬性可選。 |
align-self | 可覆蓋align-items屬性。默認值爲auto,表示繼承父元素的align-items屬性,如果沒有父元素,則等同於stretch |
order: <number>;
flex-grow: <number>; /* default 0 */
flex-shrink: <number>; /* default 1 */
flex-basis: <length> | auto; /* default auto */
flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ] //該屬性有兩個快捷值:auto (1 1 auto) 和 none (0 0 auto)
align-self: auto | flex-start | flex-end | center | baseline | stretch;
待續。。。