Flex佈局
display: flex;
將物件作為彈性伸縮盒展示,用於塊級元素display: inline-flex;
將物件作為彈性伸縮盒展示,用於行內元素
注意相容問題:
- webkit核心瀏覽器應使用字首
-webkit
- IE瀏覽器,可以很好的相容IE11+版本,對於IE10只有部分可以相容,且使用時需增加
-ms
,IE10瀏覽器中容器定義成彈性伸縮盒時,需使用display: -ms-flexbox
示例的dom結構:
<div class="box"> <!--容器-->
<div class="item">1</div> <!--子項-->
<div class="item">2</div>
<div class="item">3</div>
</div>複製程式碼
基礎樣式設計:
.box {
width: 200px;
height: 200px;
background-color: #58a;
}
.item {
width: 50px;
height: 50px;
margin: 2px;
background-color: #fb3;
}複製程式碼
Flex 作用於Box容器上的6個屬性介紹
1、flex-direction
用於指定Flex主軸的方向,繼而決定 Flex子項在Flex容器中的位置
取值:row | row-reverse | column | column-reverse
- row:預設值,表示水平方向從左到右排列,此時水平方向軸線為主軸
- row-reverse:與row相反
- column:表示垂直方向從上到下排列,此時垂直方向軸線為主軸
- column-reverse:與column相反
flex-direction
四種取值的效果圖如下:
2、flex-wrap
用於指定Flex子項是否換行
取值:nowrap | wrap | wrap-reverse
- nowrap:預設值,表示不換行,Flex子項可能會溢位
- wrap:表示換行,溢位的Flex子項會被放到下一行
- wrap-reverse:表示反方向換行
flex-wrap
三種取值的效果圖如下:
從示例圖中不難發現,換行以後兩行之間產生了很大的間距,這個問題,在後面介紹的 align-content
屬性中可以得到很好的解決。
3、flex-flow
複合屬性,是flex-direction
和 flex-wrap
的簡寫屬性,是用於指定Flex子項的排列方式
4、justify-content
用於指定主軸(水平方向)上Flex子項的對齊方式
取值:flex-start | flex-end | center | space-between | space-around
- flex-start:預設值,表示與行的起始位置對齊
- flex-end:表示與行的結束位置對齊
- center:表示與行中間對其
- space-between:表示兩端對齊,中間間距相等。要注意特殊情況,當剩餘空間為負數或者只有一個項時,效果等同於
flex-start
- space-around:表示間距相等,中間間距是兩端間距的2倍。要注意特殊情況,當剩餘空間為負數或者只有一個項時,效果等同於
center
justify-content
的前三種取值的效果圖如下:
justify-content
取值為 space-between
的效果圖如下(注意特殊情況下效果等同於flex-start):
justify-content
取值為 space-around
的效果圖如下(注意特殊情況下效果等同於center):
5、align-items
用於指定側軸(垂直方向)上Flex子項的對齊方式
取值:stretch | flex-start | flex-end | center | baseline
- stretch:預設值,當Flex子項未設定高度或者高度值為auto時,stretch起作用,將Flex子項高度設定為行高度。這裡需要注意,在只有一行的情況下,行的高度為容器的高度,即Flex子項高度為容器的高度
- flex-start:表示與側軸開始位置對齊
- flex-end:表示與側軸的結束位置對齊
- center:表示與側軸中間對其
- baseline:表示基線對齊,當行內軸與側軸在同一線上,即所有Flex子項的基線在同一線上時,效果等同於
flex-start
align-items
取值為 stretch
的效果圖如下:
align-items
取值為 flex-start flex-end center
的效果圖如下:
align-items
取值為 baseline
的效果圖如下:
6、align-content
該屬性只作用於多行的情況下,用於多行的對齊方式
取值:stretch | flex-start | flex-end | center | space-between | space-around
- stretch:預設值,當Flex子項未設定高度或者高度值為auto時,stretch起作用,將Flex子項高度設定為行高度。
- flex-start:表示各行與側軸開始位置對齊,第一行緊靠側軸開始邊界,之後的每一行都緊靠前面一行
- flex-end:表示各行與側軸的結束位置對齊,最後一行緊靠側軸結束邊界,之後的每一行都緊靠前面一行
- center:表示各行與側軸中間對其
- space-between:表示兩端對齊,中間間距相等。要注意特殊情況,當剩餘空間為負數時,效果等同於
flex-start
- space-around:表示各行之間間距相等,中間間距是兩端間距的2倍。要注意特殊情況,當剩餘空間為負數時,效果等同於
center
再次強調:該屬性只作用於多行的情況,在只有一行的Flex容器上無效,另外該屬性可以很好的處理,換行以後相鄰行之間產生的間距。
align-content
各個取值的效果圖如下:
Flex 作用於子項上的6個屬性介紹
1、order
該屬性用來指定Flex子項的排列順序,數值越小,越靠前,可以為負數
取值:數值,預設值為0
2、flex-grow
用來指定Flex子項的擴充套件比例,不可以為負數,Flex容器會根據Flex子項設定的擴充套件比例作為比率來分配剩餘空間
取值:數值,預設值為0,表示即使存在剩餘空間,Flex子項也不會擴充套件
如下圖中,按照1:3分配剩餘空間:
3、flex-shrink
用來指定Flex子項的收縮比例,不可以為負數,Flex容器會根據Flex子項設定的收縮比例作為比率來收縮各個Flex子項
取值:數值,預設值為1,表示所有子項在剩餘空間為負數時,等比例收縮
注意:flex-shrink
只能在不換行的情況下使用
如下圖中,按照1:3收縮:
4、flex-basis
用來指定Flex子項的佔據的空間,不可以為負數
取值:auto | length | percentage | content
- auto:預設值,計算規則:檢索Flex子項是否設定了width值(或者height值,取決於flex-direction),如果設定了非auto的值,則使用width值(或者height值),若沒有則使用content
- length:用長度值定義寬度,不可為負數
- percentage:使用百分比定義寬度,不可為負數
如下圖中,為Item設定 flex-basis: 50%;
,在按照1:3分配剩餘空間:
容器寬度為200px,Item1原始寬度為50px,設定 flex-basis: 50%;
後寬度變成100px,擴充套件後寬度為110.5px;而Item2原始寬度為50px,擴充套件後為81.5px,比例正好是1:3
注意:
設定
flex-grow
進行分配剩餘空間,或者使用flex-shrink
進行收縮都是在flex-basis的基礎上進行的;當
flex-basis
的值以及width(或者height)的值均為非auto時,- 1)若content長度同時大於
flex-basis
的值以及width(或者height)的值,此時以flex-basis
與width(或者height)中值大的為準 ,但是,如果子項設定了overflow: hidden;
或者overflow: auto;
,此時以flex-basis
值為準; - 2)若content長度同時小於
flex-basis
的值以及width(或者height)的值,此時以flex-basis
值為準; - 3)若content長度小於
flex-basis
的值,大於width(或者height)的值,此時以flex-basis
值為準; - 4)若content長度大於
flex-basis
的值,小於width(或者height)的值,此時以content自身長度值為準;
- 1)若content長度同時大於
當width(或者height)的值為auto時,且內容的長度大於
flex-basis
設定的值,此時以content自身長度值為準,且不能進行flex-shrink收縮。相反如果內容的長度小於flex-basis
設定的值,則會使用flex-basis
設定的值;- 當存在最小值
min-width
(min-height
)時,且flex-basis
的值小於最小值時,寬度以最小值為準,當flex-basis
的值大於最小值時,以flex-basis
的值為準
5、flex
複合屬性,是flex-grow
、 flex-shrink
和 flex-basis
的簡寫屬性,用來指定Flex子項如何分配空間
取值:none | 各拆分項屬性
- none:0 0 auto
- auto:1 1 auto
- 1:1 1 0%
- 0 auto 或 initial:0 1 auto 即初始值
注意:
- flex-grow:預設值為0,若省略則被預設為1
- flex-shrink:預設值為1,省略時預設為1
- flex-basis:預設值為auto,省略時預設為0%
6、align-self
用來單獨指定某Flex子項的對齊方式
取值:auto | flex-start | flex-end | center | baseline | stretch
- auto:預設值,查詢父元素的
align-items
值,如果沒有則取值為stretch
- 其他值同
align-items
如果想了解更多關於Flex佈局的內容,可以檢視Flex佈局應用