CSS3 - Flexible Box (Flex)
目錄
一、概念
Flex是Flexible Box(彈性盒子)的縮寫,意為”彈性佈局”,用來為盒狀模型提供最大的靈活性。屬於CSS3的一種新佈局。當頁面需要適應不同的螢幕大小以及裝置型別時,確保元素擁有恰到的佈局方式。
Flex佈局中,子元素的float、clear和vertical-align屬性將失效。
採用Flex佈局的元素,稱為 彈性容器(flex container),簡稱”容器”。
容器的所有子元素自動成為容器成員,稱為 彈性專案(flex item),簡稱”專案”或“彈性子元素”。<div class="flex-container"> <div class="flex-item">flex item 1</div> <div class="flex-item">flex item 2</div> <div class="flex-item">flex item 3</div> </div>
水平為軸(main axis),主軸的開始位置(與邊框的交叉點)叫做main start,結束位置叫做main end。
垂直為交叉軸(cross axis),交叉軸的開始位置叫做cross start,結束位置叫做cross end。
專案預設沿主軸排列。單個專案佔據的主軸空間叫做main size,佔據的交叉軸空間叫做cross size。
二、容器屬性
1、flex-direction 屬性
指定item在父容器中的位置,決定主軸的方向(即專案的排列方向)
flex-direction: row | row-reverse | column | column-reverse;
-- row(預設值):水平方向,從左到右排列(左對齊)。例:123
-- row-reverse:水平方向,與row相反,反轉橫行排列,(右對齊)從後往前排列,後項前置。例:321
-- column:垂直方向,從上往下排列。
-- column-reverse:垂直方向,與column相反,從上往下顯示,反轉縱向排序。後項前置。
<div class="flex-container"> <div class="flex-item">flex item 1</div> <div class="flex-item">flex item 2</div> <div class="flex-item">flex item 3</div> </div>
2、flex-wrap 屬性
定義,如果一條軸線排不下,如何換行。
flex-wrap: nowrap | wrap | wrap-reverse;
- nowrap - 預設, 彈性容器為單行,不換行。該情況下彈性子項可能會溢位容器。
- wrap - 彈性容器為多行,第一行位於上方。該情況下彈性子項溢位的部分會被放置到新行,子項內部會發生斷行
- wrap-reverse -反轉 wrap 排列,多行,第一行位於下方。
3、flex-flow 屬性
是flex-direction屬性和flex-wrap屬性的簡寫形式,預設值為row nowrap。
flex-flow: <flex-direction> <flex-wrap>;
4、justify-content (內容對齊)屬性
應用在彈性容器上,把彈性專案沿著主軸線(main axis)對齊。
justify-content: flex-start | flex-end | center | space-between | space-around;
- flex-start:
彈性專案向行頭緊挨著填充。這個是預設值。第一個彈性項的main-start外邊距邊線被放置在該行的main-start邊線,而後續彈性項依次平齊擺放。
- flex-end:
彈性專案向行尾緊挨著填充。第一個彈性項的main-end外邊距邊線被放置在該行的main-end邊線,而後續彈性項依次平齊擺放。
- center:
彈性專案居中緊挨著填充。(如果剩餘的自由空間是負的,則彈性專案將在兩個方向上同時溢位)。
- space-between:
彈性專案平均分佈在該行上。如果剩餘空間為負或者只有一個彈性項,則該值等同於flex-start。否則,第1個彈性項的外邊距和行的main-start邊線對齊,而最後1個彈性項的外邊距和行的main-end邊線對齊,然後剩餘的彈性項分佈在該行上,相鄰專案的間隔相等。
- space-around:
彈性專案平均分佈在該行上,兩邊留有一半的間隔空間。如果剩餘空間為負或者只有一個彈性項,則該值等同於center。否則,彈性專案沿該行分佈,且彼此間隔相等(比如是20px),同時首尾兩邊和彈性容器之間留有一半的間隔(1/2*20px=10px)。
5、align-items 屬性
定義專案在交叉軸上如何對齊。
align-items: flex-start | flex-end | center | baseline | stretch;
- flex-start
彈性盒子元素的側軸(縱軸)起始位置的邊界緊靠住該行的側軸起始邊界。- flex-end
彈性盒子元素的側軸(縱軸)起始位置的邊界緊靠住該行的側軸結束邊界。- center
彈性盒子元素在該行的側軸(縱軸)上居中放置。(如果該行的尺寸小於彈性盒子元素的尺寸,則會向兩個方向溢位相同的長度)。- baseline
如彈性盒子元素的行內軸與側軸為同一條,則該值與'flex-start'等效。其它情況下,該值將參與基線對齊。- stretch
如果指定側軸大小的屬性值為'auto',則其值會使專案的邊距盒的尺寸儘可能接近所在行的尺寸,但同時會遵照'min/max-width/height'屬性的限制。
6、align-content 屬性
定義了多根軸線的對齊方式。
如果專案只有一根軸線,該屬性不起作用。align-content: flex-start | flex-end | center | space-between | space-around | stretch;
stretch
- 預設。各行將會伸展以佔用剩餘的空間。flex-start
- 各行向彈性盒容器的起始位置堆疊。flex-end
- 各行向彈性盒容器的結束位置堆疊。center
-各行向彈性盒容器的中間位置堆疊。space-between
-各行在彈性盒容器中平均分佈。space-around
- 各行在彈性盒容器中平均分佈,兩端保留子元素與子元素之間間距大小的一半。
三、專案屬性
① order 屬性
定義專案的排列順序。數值越小,排列越靠前,預設為0。
order: <integer>;
<integer>:用整數值來定義排列順序,數值小的排在前面。可以為負值。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <style> .flex-container { display: flex; width: 400px; height: 250px; background-color: lightgrey; } .flex-item { background-color: cornflowerblue; width: 100px; height: 100px; margin: 10px; } .first { order: -1; } </style> </head> <body> <div class="flex-container"> <div class="flex-item">flex item 1</div> <div class="flex-item first">flex item 2</div> <div class="flex-item">flex item 3</div> </div> </body> </html>
② flex-grow 屬性
定義專案的放大比例,預設為0,即如果存在剩餘空間,也不放大。flex-grow: <number>; /* default 0 */
③ flex-shrink 屬性
定義了專案的縮小比例,預設為1,即如果空間不足,該專案將縮小。
flex-shrink: <number>; /* default 1 */
④ flex-basis 屬性
定義了在分配多餘空間之前,專案佔據的主軸空間(main size)。
flex-basis: <length> | auto; /* default auto */
⑤ flex 屬性
flex
屬性用於指定彈性子元素如何分配空間。flex: auto | initial | none | inherit | [ flex-grow ] || [ flex-shrink ] || [ flex-basis ]
- auto: 計算值為 1 1 auto
- initial: 計算值為 0 1 auto
- none:計算值為 0 0 auto
- inherit:從父元素繼承
- [ flex-grow ]:定義彈性盒子元素的擴充套件比率。
- [ flex-shrink ]:定義彈性盒子元素的收縮比率。
- [ flex-basis ]:定義彈性盒子元素的預設基準值。
⑥ align-self 屬性
align-self
屬性用於設定彈性元素自身在側軸(縱軸)方向上的對齊方式。align-self: auto | flex-start | flex-end | center | baseline | stretch
- auto:如果'align-self'的值為'auto',則其計算值為元素的父元素的'align-items'值,如果其沒有父元素,則計算值為'stretch'。
- flex-start:彈性盒子元素的側軸(縱軸)起始位置的邊界緊靠住該行的側軸起始邊界。
- flex-end:彈性盒子元素的側軸(縱軸)起始位置的邊界緊靠住該行的側軸結束邊界。
- center:彈性盒子元素在該行的側軸(縱軸)上居中放置。(如果該行的尺寸小於彈性盒子元素的尺寸,則會向兩個方向溢位相同的長度)。
- baseline:如彈性盒子元素的行內軸與側軸為同一條,則該值與'flex-start'等效。其它情況下,該值將參與基線對齊。
- stretch:如果指定側軸大小的屬性值為'auto',則其值會使專案的邊距盒的尺寸儘可能接近所在行的尺寸,但同時會遵照'min/max-width/height'屬性的限制。