CSS3中flex佈局
Flex是Flexible Box的縮寫,意為“彈性佈局”,用來為盒狀模型提供最大的靈活性。設為Flex佈局以後,子元素的float、clear和vertical-align屬性將失效。它既可以應用於容器中,也可以應用於行業元素。
基本概念
採用Flex佈局的元素,稱為Flex容器(flex container),簡稱“容器”。它的所有子元素自動成為容器成員,成為Flex專案(flex item),簡稱“專案”。容器預設存在兩根軸:水平的主軸(main axis)和垂直的交叉軸(cross axis)。主軸的開始位置(與邊框的交叉點)叫做main start,結束位置叫做main end;交叉軸的開始位置叫做cross start,結束位置叫做cross end。專案預設沿主軸排列。單個專案佔據的主軸控制元件叫做main size,佔據的交叉軸控制元件叫做cross size。
容器屬性
flex-direction 決定主軸的方向,即專案的排列方向(預設橫向排列)
row | row-reverse | column | column-reverse | initial | inherit |
預設值。靈活的專案將水平顯示,正如一個行一樣。 | 與 row 相同,但是以相反的順序。 | 靈活的專案將垂直顯示,正如一個列一樣。 | 與 column 相同,但是以相反的順序。 | 設定該屬性為它的預設值。 | 從父元素繼承該屬性。 |
flex-wrap 容器內專案換行方式,如果一條軸線排不下,如何換行
nowrap | wrap | wrap-reverse | initial | inherit |
預設值。規定靈活的專案不拆行或不拆列。 | 規定靈活的專案在必要的時候拆行或拆列。 | 規定靈活的專案在必要的時候拆行或拆列,但是以相反的順序。 | 設定該屬性為它的預設值。 | 從父元素繼承該屬性。 |
flex-flow 以上兩個屬性的簡寫方式
eg:display:flex;flex-flow: flex-direction flex-wrap|initial|inherit;
justify-content 專案在主軸上的對齊方式
flex-start | flex-end | center | space-between | space-around | initial | inherit |
左對齊。預設值。專案位於容器的開頭 | 右對齊。專案位於容器的結尾 | 居中。專案位於容器的中心。 | 兩端對齊,專案之間的間隔都相等。專案位於各行之間留有空白的容器內 | 每個專案兩側的間隔相等。所以,專案之間的間隔比專案與邊框的間隔大一倍。專案位於各行之前、之間、之後都留有空白的容器內 | 設定該屬性為它的預設值。 | 從父元素繼承該屬性 |
align-items 專案在交叉軸上如何對齊
stretch | center | flex-start | flex-end | baseline | initial | inherit |
如果專案未設定高度或設為auto,將佔滿整個容器的高度。預設值。元素被拉伸以適應容器。 如果指定側軸大小的屬性值為'auto',則其值會使專案的邊距盒的尺寸儘可能接近所在行的尺寸,但同時會遵照'min/max-width/height'屬性的限制。 |
交叉軸的中點對齊。元素位於容器的中心。 彈性盒子元素在該行的側軸(縱軸)上居中放置。(如果該行的尺寸小於彈性盒子元素的尺寸,則會向兩個方向溢位相同的長度)。 |
交叉軸的起點對齊。元素位於容器的開頭。 彈性盒子元素的側軸(縱軸)起始位置的邊界緊靠住該行的側軸起始邊界。 |
交叉軸的終點對齊。元素位於容器的結尾。 彈性盒子元素的側軸(縱軸)起始位置的邊界緊靠住該行的側軸結束邊界。 |
專案的第一行文字的基線對齊。元素位於容器的基線上。 如彈性盒子元素的行內軸與側軸為同一條,則該值與'flex-start'等效。其它情況下,該值將參與基線對齊。 |
設定該屬性為它的預設值。 | 從父元素繼承該屬性。 |
align-content 定義了多根軸線的對齊方式。如果專案只有一根軸線,該屬性不起作用。
stretch | center | flex-start | flex-end | space-between | space-around | initial | inherit |
軸線佔滿整個交叉軸。預設值。元素被拉伸以適應容器。 各行將會伸展以佔用剩餘的空間。如果剩餘的空間是負數,該值等效於'flex-start'。在其它情況下,剩餘空間被所有行平分,以擴大它們的側軸尺寸。 |
與交叉軸的中點對齊。元素位於容器的中心。 各行向彈性盒容器的中間位置堆疊。各行兩兩緊靠住同時在彈性盒容器中居中對齊,保持彈性盒容器的側軸起始內容邊界和第一行之間的距離與該容器的側軸結束內容邊界與第最後一行之間的距離相等。(如果剩下的空間是負數,則各行會向兩個方向溢位的相等距離。) |
與交叉軸的起點對齊。元素位於容器的開頭。 各行向彈性盒容器的起始位置堆疊。彈性盒容器中第一行的側軸起始邊界緊靠住該彈性盒容器的側軸起始邊界,之後的每一行都緊靠住前面一行。 |
與交叉軸的終點對齊。元素位於容器的結尾。 各行向彈性盒容器的結束位置堆疊。彈性盒容器中最後一行的側軸起結束界緊靠住該彈性盒容器的側軸結束邊界,之後的每一行都緊靠住前面一行。 |
與交叉軸兩端對齊,軸線之間的間隔平均分佈。元素位於各行之間留有空白的容器內。 各行在彈性盒容器中平均分佈。如果剩餘的空間是負數或彈性盒容器中只有一行,該值等效於'flex-start'。在其它情況下,第一行的側軸起始邊界緊靠住彈性盒容器的側軸起始內容邊界,最後一行的側軸結束邊界緊靠住彈性盒容器的側軸結束內容邊界,剩餘的行則按一定方式在彈性盒視窗中排列,以保持兩兩之間的空間相等。 |
每根軸線兩側的間隔都相等。所以,軸線之間的間隔比軸線與邊框的間隔大一倍。元素位於各行之前、之間、之後都留有空白的容器內。 各行在彈性盒容器中平均分佈,兩端保留子元素與子元素之間間距大小的一半。如果剩餘的空間是負數或彈性盒容器中只有一行,該值等效於'center'。在其它情況下,各行會按一定方式在彈性盒容器中排列,以保持兩兩之間的空間相等,同時第一行前面及最後一行後面的空間是其他空間的一半。 |
設定該屬性為它的預設值。 | 從父元素繼承該屬性。 |
以上為容器的屬性,下面為容器中專案的屬性:
專案屬性
order 專案的排列順序。數值越小,排列越靠前,預設為0。
flex-grow 專案的放大比例,預設為
0
,即如果存在剩餘空間,也不放大。
flex-shrink 專案的縮小比例,預設為1,即如果空間不足,該專案將縮小。
flex-basis 在分配多餘空間之前,專案佔據的主軸空間(main size)。瀏覽器根據這個屬性,計算主軸是否有多餘空間。它的預設值為
auto
,即專案的本來大小。
flex 是
flex-grow
, flex-shrink
和 flex-basis
的簡寫,預設值為0 1 auto
。後兩個屬性可選。
align-self 允許單個專案有與其他專案不一樣的對齊方式,可覆蓋
align-items
屬性。預設值為auto
,表示繼承父元素的align-items
屬性,如果沒有父元素,則等同於stretch
。