CSS3 彈性盒子(Flex Box)
CSS3 彈性盒(Flex Box)
彈性盒子是 CSS3 的一種新的佈局模式。
CSS3 彈性盒（ Flexible Box 或 flexbox），是一種當(dāng)頁面需要適應(yīng)不同的螢?zāi)淮笮∫约把b置類型時確保元素?fù)碛星‘?dāng)?shù)男袨榈膩丫址绞健?
引入彈性盒佈局模型的目的是提供一種更有效的方式來對一個容器中的子元素進(jìn)行排列、對齊和分配空白空間。
CSS3 彈性盒子內(nèi)容
彈性盒子由彈性容器(Flex container)和彈性子元素(Flex item)組成。
彈性容器透過設(shè)定 display 屬性的值為 flex 或 inline-flex將其定義為彈性容器。
彈性容器內(nèi)包含了一個或多個彈性子元素。
註：?彈性容器外及彈性子元素內(nèi)是正常渲染的。彈性盒子只定義了彈性子元素如何在彈性容器內(nèi)佈置。
彈性子元素通常在彈性盒子內(nèi)一行顯示。預(yù)設(shè)情況每個容器只有一行。
以下元素展示了彈性子元素在一行內(nèi)顯示，從左到右:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
.flex-container {
display: -webkit-flex;
display: flex;
width: 400px;
height: 250px;
background-color: lightgrey;
}
.flex-item {
background-color: cornflowerblue;
width: 100px;
height: 100px;
margin: 10px;
}
</style>
</head>
<body>
<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>
</body>
</html>下面將透過一個簡單的實例來講解舊版本的各個屬性：
<html>
<head>
<meta charset="utf-8">
<style>
p{
width:150px;
border:3px solid lightblue;
background:lightgreen;
padding:5px;
margin:5px;
}
</style>
</head>
<body>
<div>
<p>發(fā)生過的空間還是看價格哈健康啊水果和卡刷卡更何況規(guī)劃哈薩克的骨灰撒塊光輝卡薩很干凈啊是高科技傻空給發(fā)生過的空間還是看價格哈健康啊水果和卡刷卡更何況規(guī)劃哈薩克的骨灰撒塊光輝卡薩很干凈啊是高科技傻空給</p>
<p>發(fā)生過的空間還是看價格哈健康啊水果和卡刷卡更何況規(guī)劃哈薩克的骨灰撒塊光輝卡薩很干凈啊是高科技傻空給</p>
<p>發(fā)生過的空間還是看價格哈健康啊水果和卡刷卡更何況規(guī)劃</p>
</div>
</body>
</html>上面結(jié)果很正常，在看看下面的例子：
<html>
<head>
<meta charset="utf-8">
<style>
p{
width:150px;
border:3px solid lightblue;
background:lightgreen;
padding:5px;
margin:5px;
}
div{
display:-webkit-box;
display:box;
}
</style>
</head>
<body>
<div>
<p>發(fā)生過的空間還是看價格哈健康啊水果和卡刷卡更何況規(guī)劃哈薩克的骨灰撒塊光輝卡薩很干凈啊是高科技傻空給發(fā)生過的空間還是看價格哈健康啊水果和卡刷卡更何況規(guī)劃哈薩克的骨灰撒塊光輝卡薩很干凈啊是高科技傻空給</p>
<p>發(fā)生過的空間還是看價格哈健康啊水果和卡刷卡更何況規(guī)劃哈薩克的骨灰撒塊光輝卡薩很干凈啊是高科技傻空給</p>
<p>發(fā)生過的空間還是看價格哈健康啊水果和卡刷卡更何況規(guī)劃</p>
</div>
</body>
</html>看到了吧，現(xiàn)在每一個p元素都變成一個box了，這就是彈性佈局的神奇所在！
在上面中，我們將div元素的display設(shè)定為box，這就是舊版的彈性佈局。對於比較舊的瀏覽器版本，我們需要加上-webkit-前綴。
舊版的彈性佈局有兩個屬性值：
?box : 將容器盒模型作為區(qū)塊級彈性伸縮盒顯示??inline-box : 將容器盒模型作為內(nèi)聯(lián)級彈性伸縮盒子顯示
PS：我們知道區(qū)塊級它是佔用整行的，例如div元素；而內(nèi)聯(lián)級不佔用整行，例如span元素。但是我們設(shè)置了整個盒子，他們都不佔用，保持一致。就像我們上面的例子一樣，給div元素設(shè)定了盒子，那麼div元素裡面的p元素就不佔用了。
box-orient 屬性
box-orient屬性主要實作盒子內(nèi)部元素的流動方向。
div{
display:-webkit-box;
display:box;
-webkit-box-orient:vertical;
box-orient:vertical;
}此時的結(jié)果就是垂直排列：
此屬性的屬性值有：
horizo??ntal ： 伸縮項目從左到右右水平排列??? vertical? ： 伸縮項目由上到下垂直排列inline-axis ： 伸縮項目沿著內(nèi)聯(lián)軸排列顯示block-axis ： 伸縮項目沿著塊軸排列顯示
#大家不妨試試：horizo??ntal和inline-axis 都是水平排列，而vertical 和block-axis 都是垂直排列。
box-direction屬性
box-direction 屬性主要是設(shè)定伸縮容器中的流動順序。
div{
display:-webkit-box;
display:box;
-webkit-box-direction:reverse;
box-direction:reverse;
}此屬性的屬性值有：
normal? : 正常順序，預(yù)設(shè)值reverse : 反序
box-pack屬性
#box-pack屬性用於伸縮項目的分佈方式。
此屬性的屬性值有：
start?? :? 伸縮項目以起始點靠齊? end?? :? 伸縮項目以結(jié)束點靠齊center :? 伸縮項目以中心點靠齊justify? :? 靠齊center :? 伸縮項目以中心點靠齊justify? :? 靠齊center :? 伸縮項目以中心點靠齊justify? :? 靠齊；平手分佈
下面我們都試試看各個屬性值的效果：
start屬性值：
div{
-webkit-box-pack:start;
box-pack:start;
}2. end屬性值：
div{
-webkit-box-pack:
end
;
box-pack:
end
;
}3.center屬性值：
div{
-webkit-box-pack:
center
;
box-pack:
center
;
}4.justify屬性值：
div{
-webkit-box-pack:
justify
;
box-pack:
justify
;
}PS:垂直方向上也是一樣的原理，但如果height為auto的話，效果將出不來。所以需要給height設(shè)定一個定高（最好比預(yù)設(shè)高）。這時，就能看到在垂直方向上的效果了。這裡我就不再贅述了。
box-align屬性
box-align 屬性用來處理伸縮容器的額外空間。
此屬性的屬性值有：
???? start? ： 伸縮項目以頂部為基準(zhǔn)，清理下部額外空間???? end??? ： 伸縮項目以底部為基準(zhǔn)，清理上部額外空間中部為基準(zhǔn)，平均清理上下部額外空間baseline ： 伸縮項目以基線為基準(zhǔn)，清理額外的空間stretch? ： 伸縮項目填充整個容器，預(yù)設(shè)值
相同的，我們將試一下每個屬性值的效果：
1.start屬性值
div{
display:-webkit-box;
display:box;
-webkit-box-align:start;
box-align:start;
}2.end屬性值
div{
display:-webkit-box;
display:box;
-webkit-box-align:
end
;
box-align:
end
;
}3.center屬性值
div{
display:-webkit-box;
display:box;
-webkit-box-align:
center
;
box-align:
center
;
}4.baseline屬性值
如果box-orient是內(nèi)嵌單軸或橫向，所有的子元素都置於他們的基線對齊。
div{
display:-webkit-box;
display:box;
-webkit-box-orient:horizontal;
box-orient:horizontal;
-webkit-box-align:baseline;
box-align:baseline;
}而如果box-orient是塊軸或垂直方向的，那麼所有的子元素都會居中垂直排列。
div{
display:-webkit-box;
display:box;
-webkit-box-orient:vertical;
box-orient:vertical;
-webkit-box-align:baseline;
box-align:baseline;
}5.stretch屬性值
所有子元素拉伸以填入包含區(qū)塊。
div{
display:-webkit-box;
display:box;
-webkit-box-align:stretch;
box-align:stretch
;}box-flex屬性
box-flex 屬性可以使用浮點數(shù)分配伸縮項目的比例。此屬性是為容器內(nèi)的項目設(shè)定的，它們會基於父容器的寬度來分配它們所佔的比例：
p:nth-child(1){
-webkit-box-flex:1;
box-flex:1;
}p:nth-child(2){
-webkit-box-flex:3;
box-flex:3;
}p:nth-child(3){
-webkit-box-flex:1;
box-flex:1;
}當(dāng)然也可以有些項目是固定寬度的，那麼其他的項目也會分配剩餘的寬度，例如這裡第一個p元素設(shè)定為固定寬度：
p:nth-child(2){
-webkit-box-flex:2;
box-flex:2;
}p:nth-child(3){
-webkit-box-flex:1;
box-flex:1;
}更多使用情況，大家可以自己慢慢去嘗試。
box-ordinal-group 屬性
box-ordinal-group 屬性可以設(shè)定伸縮項目的顯示位置。
p:nth-child(1){
-webkit-box-ordinal-group:2;
box-ordinal-group:2;
}p:nth-child(2){
-webkit-box-ordinal-group:3;
box-ordinal-group:3;
}p:nth-child(3){
-webkit-box-ordinal-group:1;
box-ordinal-group:1;
}可以看到：第一個p元素排在了第二，第二個p元素排在了第三，第三個p元素排在了第一?？梢詥为毥o某一個p元素設(shè)定此屬性，其他項目會依照原來的順序做變動。
OK，那麼舊版的所有屬性就簡單的介紹完了，更多結(jié)合的用法還是根據(jù)需要自己多動手去練習(xí)一下。
這裡舉一個水平垂直居中的例子：
div{
display:-webkit-box;
display:box;
height:500px;
border:1px solid #f00;
-webkit-box-pack:center;
box-pack:center;
-webkit-box-align:center;
box-align:center;
}此時我們再給p元素設(shè)定一個固定的高度：
p{
width:150px;
height:200px;
}CSS3 彈性盒子屬性
##表格列出了彈性盒子中常用的屬性:
屬性? ? ? ? ? ? ? ? ? ? ? ? ? ? ?##display ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 指定中HTML 元素匣類型。 ? ?
flex-direction ? ? ? ? ? ? 指定了彈性容器中子元素的排列方式 ? ?
