前端佈局一直是CSS的一個重點應用,然而基於盒子模型的傳統佈局方案,依賴display
+ position
+ float
屬性,對於某些特殊的佈局非常不方便,比如:垂直居中就不容易實現。針對這一情況,在2009
年,W3C
提出了一種新的方案:Flex
佈局,可以簡便、完整、響應式地實現前端的各種佈局,並且已經得到幾乎所有瀏覽器的支持。
衆所周知,前端分爲PC
端和移動端,並且它們的界面佈局有一些差別,比如:PC
端的界面中,水平方向是主軸(main axis
),豎直方向是交叉軸(cross axis
);而移動端,水平方向是交叉軸(cross axis
),豎直方向是主軸(main axis
),針對這一差別,在前端佈局中要特別注意。
flex屬性簡介
flex
的屬性分爲兩類:父容器屬性和子item
的屬性
父容器屬性
屬性 | 作用 | 特性分類 |
---|---|---|
flex-direction | 定義子項在容器內的排列方向 | 排列 |
flex-wrap | 定義子項在容器內的換行效果 | 排列 |
flex-flow | flex-direction和flex-wrap的複合屬性 | 排列 |
justify-content | 定義子項在容器內水平對齊方式 | 對齊 |
align-items | 定義子項在容器內垂直對齊方式 | 對齊 |
align-content | 定義多行子項在容器內整體垂直對齊方式 | 對齊 |
子item屬性
屬性 | 作用 | 特性分類 |
---|---|---|
order | 定義子項們的排列順序 | 排列 |
flex-grow | 定義子項寬度之和不足父元素寬度時,子項拉伸的比例 | 佔地面積 |
flex-shrink | 定義子項寬度之和超過父元素寬度時,子項縮放的比例 | 佔地面積 |
flex-basis | 定義子項的初始寬度,flex-grow和flex-shrink以此爲基礎縮放 | 佔地面積 |
align-self | 定義單個子項與其他項目不一樣的對齊方式 | 對齊 |
Flex佈局
Flex
是Flexible Box
的縮寫,意思是彈性佈局,用來爲盒子模型提供最大的靈活性。分爲兩種佈局方式:flex
和 inline-flex
。
1. flex: 將對象作爲彈性伸縮盒顯示
flex
默認從左邊開始佈局,所以指定寬度後,子item
就開始從左至右依次佈局
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Test</title>
<style type="text/css">
.main{
width:200px;
background-color: red;
display: flex;/*父div設置該屬性*/
}
.main>div{
width: 50px;
height: 50px;
border: 1px solid blue;
box-sizing: border-box;/*這是css3屬性,如果不懂,請繼續往下閱讀*/
/*float:left;這個屬性就不需要了,會自動浮動*/
}
</style>
</head>
<body>
<div class="main">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
</body>
</html>
效果圖
2. inline-flex:將對象作爲內聯塊級彈性伸縮盒顯示
inline-flex
將對象作爲內聯級容器,它會根據子item
的大小自適應寬度和高度,所以可以刪除width: 200px
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Test</title>
<style type="text/css">
.main{
background-color: red;
display: inline-flex;/*父div設置該屬性*/
}
.main>div{
width: 50px;
height: 50px;
border: 1px solid blue;
box-sizing: border-box;/*這是css3屬性,如果不懂,請繼續往下閱讀*/
/*float:left;這個屬性就不需要了,會自動浮動*/
}
</style>
</head>
<body>
<div class="main">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
</body>
</html>
效果圖
flex父容器屬性
1. flex direction
控制主軸的方向,即子item
的排列方向,有四個取值範圍:
- row(default)- 主軸水平
- row-reverse
- column - 主軸垂直
- column-reverse
2. flex wrap
定義子item
在主軸方向的換行效果
3. flex-flow
該屬性是flex-direction
和flex-wrap
兩個屬性的縮寫,默認值爲:row nowrap
4. justify content
定義子item
在主軸方向的對齊方式
5. align-items
定義子item
在交叉軸方向的對齊方式
6. align-content
定義多行子item
在交叉軸上的對齊方式
子item屬性
1. order
定義子item
的排列順序,默認爲0
2. flex-grow
定義子item
的寬度小於父容器時,子item
的拉伸比例,默認爲0
,表示不拉伸
3. flex-shrink
定義子item
的寬度之和超過父容器時,子item
的縮放的比例,默認爲1
4. flex-basis
設置子item的寬度(flex-direction = row
)或高度(flex-direction = column
)。如果設置該屬性,那麼flex-grow/flex-shrink
以該屬性大小進行縮放
5. flex
該屬性是:flex-grow flex-shrink flex-basis
的簡寫,默認值爲:0 1 auto
,其中後兩個屬性可選
6. align-self
定義單個子item
在交叉軸上的對齊方式,會覆蓋默認的對齊方式。默認值爲auto
,表示繼承父容器的align-items
屬性,如果沒有父容器,則等同於stretch
(stretch
: 伸縮項目在交叉軸方向佔滿伸縮容器, 前提是不設置交叉軸方向的尺寸)
定位
display
屬性定義子item
如何在父容器內佈局,有兩中類型:relative
和 absolute
1. display: relative
在相對定位中,佈局子item
時需要用到margin
、border
、padding
等盒子模型。其中,border
和padding
會顯示在item的背景色中;而margin
則不會,默認是透明色
2. display: absolute
使用絕對定位的item
,如果其父容器設置了relative
佈局,則以父容器做參考,如果父容器不設置relative
佈局,則以window
做參考。其中,設置佈局的屬性爲:left、right、top、bottom、start、end
。
Position = Absolute; Start = 0; Top = 0; Width = 50; Height = 50;
視圖:
Position = Absolute; Start = 10; Top = 10; End = 10; Bottom = 10;
視圖:
至此,Flexbox的語法介紹完畢,雖然有點多,但是還要多練,熟能生巧,熟練後你會發現,前端flex佈局快速、高效和靈活。
(部分圖片來源互聯網,如有侵權,請告知,我怕賠不起)
參考文章
https://www.w3.org/TR/css-flexbox-1/#flex-formatting-context
https://facebook.github.io/yoga/docs/absolute-position/
http://www.cnblogs.com/shuiyi/p/5716918.html
http://www.w3school.com.cn/css/css_boxmodel.asp