Flex佈局
Flex 佈局,可以實現各種頁面佈局。目前,它已經得到了所有瀏覽器的支援。Webkit 核心的瀏覽器,必須加上 -webkit
字首。
Flex 是 Flexible Box 的縮寫,意為"彈性佈局"。
一、Flex的基本概念
採用 Flex 佈局的元素,稱為 Flex 容器(flex container),簡稱"容器"。它的所有子元素自動成為容器成員,稱為 Flex 專案(flex item),簡稱"專案"。
容器預設存在兩根軸:預設水平的為主軸(main axis)和垂直的為交叉軸(cross axis)。主軸的開始位置叫做 main start
,結束位置叫做 main end
;交叉軸的開始位置叫做 cross start
,結束位置叫做 cross end
。
專案預設沿主軸排列。單個專案佔據的主軸空間叫做 main size
,佔據的交叉軸空間叫做 cross size
。
需要注意的是:當元素設為 Flex 佈局以後,子元素的 float
、 clear
和 vertical-align
屬性將失效。
二、將元素指定為Flex佈局
可以將任何容器指定為Flex佈局
.box{ display: flex; }
行內元素也可以使用 Flex 佈局。
.box{ display: inline-flex; }
Webkit 核心的瀏覽器,必須加上 -webkit
字首。
.box{ display: -webkit-flex; /* Safari */ display: flex; }
三、容器屬性詳述
容器的屬性有6個。
- flex-direction
- flex-wrap
- flex-flow
- justify-content
- align-items
- align-content
1.flex-direction
flex-direction
屬性決定主軸的方向,即專案排列的方向。
可能有4個值
- row(預設值):主軸為水平方向,專案沿主軸從左至右排列
- column:主軸為豎直方向,專案沿主軸從上至下排列
- row-reverse:主軸水平,專案從右至左排列,與row反向
- column-reverse:主軸豎直,專案從下至上排列,與column反向
.container{ width: 100px; height: 100px; border: 1px solid black; border-radius: 10px; } .item{ margin-left: 1px; margin-top: 1px; display: inline-block; width: 20px; height: 20px; border: 1px solid black; border-radius: 20px; background: black; color: red; text-align: center; } <div class="container"> <span class="item">1</span> <span class="item">2</span> <span class="item">3</span> <span class="item">4</span> <span class="item">5</span> <span class="item">6</span> </div>
.container{ display: flex; border: 1px solid black; border-radius: 5px; flex-direction: column; }
2.flex-wrap屬性
預設情況下,專案都排在一條線上,即主軸上。 flex-wrap
屬性定義,當一條軸線排不下時,是否換行和方式。
可能有3個值
- nowrap(預設)
- wrap
- wrap-reverse
3.flex-flow
flex-flow
屬性是 flex-direction
屬性和 flex-wrap
屬性的簡寫形式,預設值為 row nowrap
。
4.justify-content屬性
justify-content
屬性定義了專案在主軸上的對齊方式。
可能的值有:flex-start(預設),flex-end,center,space-between,space-around。當主軸沿水平方向時,具體含義為
- flex-start(預設值):左對齊
- flex-end:右對齊
- center:居中對齊
- space-between:兩端對齊,專案之間的間隔都相等。
- space-around:每個專案兩側的間隔相等。所以,專案之間的間隔比專案與邊框的間隔大一倍。
5.align-items屬性
align-items
屬性定義專案在交叉軸上如何對齊。
可能的值有:
- flex-start:交叉軸的起點對齊
- flex-end:交叉軸的終點對齊
- center:交叉軸的中點對齊
- baseline:專案的第一行文字的基線對齊
- stretch(預設值):如果專案未設定高度或設為auto,將佔滿整個容器的高度
6.align-content屬性
align-content
屬性定義了多根軸線(即item不止一行時)的對齊方式。如果專案只有一根軸線,該屬性不起作用。
注意當有多行時,定義了align-content後,align-items屬性將失效。align-content可能值含義如下(假設主軸為水平方向):
- flex-start:與交叉軸的起點對齊
- flex-end:與交叉軸的終點對齊
- center:與交叉軸的中點對齊
- space- between:與交叉軸兩端對齊,軸線之間的間隔平均分佈
- space-around:每根軸線兩側的間隔都相等。所以,軸線之間的間隔比軸線與邊框的間隔大一倍
- stretch(預設值):軸線佔滿整個交叉軸
四、專案屬性詳述
專案一共有六個屬性:
order flex-grow flex-shrink flex-basis flex align-self
1.order屬性
order的值是整數,預設為0,整數越小,item排列越靠前。
.item:nth-child(1){ order: 4; } .item:nth-child(1){ order: 3; } .item:nth-child(1){ order: 2; } .item:nth-child(1){ order: 1; } <div class="container"> <span class="item">1</span> <span class="item">2</span> <span class="item">3</span> <span class="item">4</span> <span class="item">5</span> <span class="item">6</span> </div>
2.flex-grow屬性
定義了當flex容器有多餘空間時,item是否放大。預設值為0,即當有多餘空間時也不放大;可能的值為整數,表示不同item的放大比例。
注意:當在容器中定義了 flex-wrap: nowrap
,而且空間不足的情況下,則沒有放大的效果。
3.flex-shrink
定義了當容器空間不足時,item是否縮小。預設值為1,表示當空間不足時,item自動縮小,其可能的值為整數,表示不同item的縮小比例。
如果所有專案的 flex-shrink
屬性都為1,當空間不足時,都將等比例縮小。如果一個專案的 flex-shrink
屬性為0,其他專案都為1,則空間不足時,前者不縮小。
負值對該屬性無效。
注意:當在容器中定義了 flex-wrap: wrap
,表示空間足夠,則沒有縮小的效果。
4.flex-basis屬性
flex-basis
屬性定義專案佔據的主軸空間(main size)。瀏覽器根據這個屬性,計算主軸是否有多餘空間。它的預設值為 auto
,即專案的本來大小。
5.flex屬性
flex
屬性是 flex-grow
, flex-shrink
和 flex-basis
的簡寫,預設值為 0 1 auto
。後兩個屬性可選。
6.align-self屬性
align-self
屬性允許單個專案有與其他專案不一樣的對齊方式,可覆蓋 align-items
屬性。預設值為 auto
,表示繼承父元素的 align-items
屬性,如果沒有父元素,則等同於 stretch
。
- auto:和父元素align-items的值一致
- flex-start: 交叉軸的起點對齊
- flex-end:交叉軸的終點對齊
- center:交叉軸的中點對齊
- baseline:專案的第一行文字的基線對齊
- stretch:如果專案未設定高度或設為auto,將佔滿整個容器的高度