CSS3 彈性盒子(Flex Box)
CSS3 彈性盒子(Flex Box)
彈性盒子是 CSS3 的一種新的布局模式。
CSS3 彈性盒（ Flexible Box 或 flexbox），是一種當(dāng)頁面需要適應(yīng)不同的屏幕大小以及設(shè)備類型時(shí)確保元素?fù)碛星‘?dāng)?shù)男袨榈牟季址绞健?/p>
引入彈性盒布局模型的目的是提供一種更加有效的方式來對一個(gè)容器中的子元素進(jìn)行排列、對齊和分配空白空間。
CSS3 彈性盒子內(nèi)容
彈性盒子由彈性容器(Flex container)和彈性子元素(Flex item)組成。
彈性容器通過設(shè)置 display 屬性的值為 flex 或 inline-flex將其定義為彈性容器。
彈性容器內(nèi)包含了一個(gè)或多個(gè)彈性子元素。
注意：?彈性容器外及彈性子元素內(nèi)是正常渲染的。彈性盒子只定義了彈性子元素如何在彈性容器內(nèi)布局。
彈性子元素通常在彈性盒子內(nèi)一行顯示。默認(rèn)情況每個(gè)容器只有一行。
以下元素展示了彈性子元素在一行內(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>下面將通過一個(gè)簡單的實(shí)例來講解舊版本的各個(gè)屬性：
<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ā)生過的空間還是看價(jià)格哈健康啊水果和卡刷卡更何況規(guī)劃哈薩克的骨灰撒塊光輝卡薩很干凈啊是高科技傻空給發(fā)生過的空間還是看價(jià)格哈健康啊水果和卡刷卡更何況規(guī)劃哈薩克的骨灰撒塊光輝卡薩很干凈啊是高科技傻空給</p>
<p>發(fā)生過的空間還是看價(jià)格哈健康啊水果和卡刷卡更何況規(guī)劃哈薩克的骨灰撒塊光輝卡薩很干凈啊是高科技傻空給</p>
<p>發(fā)生過的空間還是看價(jià)格哈健康啊水果和卡刷卡更何況規(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ā)生過的空間還是看價(jià)格哈健康啊水果和卡刷卡更何況規(guī)劃哈薩克的骨灰撒塊光輝卡薩很干凈啊是高科技傻空給發(fā)生過的空間還是看價(jià)格哈健康啊水果和卡刷卡更何況規(guī)劃哈薩克的骨灰撒塊光輝卡薩很干凈啊是高科技傻空給</p>
<p>發(fā)生過的空間還是看價(jià)格哈健康啊水果和卡刷卡更何況規(guī)劃哈薩克的骨灰撒塊光輝卡薩很干凈啊是高科技傻空給</p>
<p>發(fā)生過的空間還是看價(jià)格哈健康啊水果和卡刷卡更何況規(guī)劃</p>
</div>
</body>
</html>看到了吧，現(xiàn)在每一個(gè)p元素都變成一個(gè)box了，這就是彈性布局的神奇所在！
在上面中，我們將div元素的display設(shè)置為box，這就是舊版本的彈性布局。對于比較舊的瀏覽器版本，我們需要加上-webkit-前綴。
舊版本的彈性布局有兩個(gè)屬性值：
?box : 將容器盒模型作為塊級(jí)彈性伸縮盒顯示??inline-box : 將容器盒模型作為內(nèi)聯(lián)級(jí)彈性伸縮盒顯示
PS：我們知道塊級(jí)它是占用整行的，比如div元素；而內(nèi)聯(lián)級(jí)不占用整行，比如span元素。但是我們設(shè)置了整個(gè)盒子，他們都不占用，保持一致。就像我們上面的例子一樣，給div元素設(shè)置了盒子，那么div元素里面的p元素就不占用了。
box-orient 屬性
box-orient屬性主要實(shí)現(xiàn)盒子內(nèi)部元素的流動(dòng)方向。
div{
display:-webkit-box;
display:box;
-webkit-box-orient:vertical;
box-orient:vertical;
}此時(shí)的結(jié)果就是垂直排列：
此屬性的屬性值有：
horizontal ： 伸縮項(xiàng)目從左到右水平排列??? vertical? ： 伸縮項(xiàng)目從上到下垂直排列inline-axis ： 伸縮項(xiàng)目沿著內(nèi)聯(lián)軸排列顯示block-axis ： 伸縮項(xiàng)目沿著塊軸排列顯示
大家不妨試一下：horizontal 和 inline-axis 都是水平排列，而vertical 和 block-axis 都是垂直排列。
box-direction屬性
box-direction 屬性主要是設(shè)置伸縮容器中的流動(dòng)順序。
div{
display:-webkit-box;
display:box;
-webkit-box-direction:reverse;
box-direction:reverse;
}此屬性的屬性值有：
normal? : 正常順序，默認(rèn)值reverse : 反序
box-pack屬性
box-pack 屬性用于伸縮項(xiàng)目的分布方式。
此屬性的屬性值有：
start?? :? 伸縮項(xiàng)目以起始點(diǎn)靠齊? end?? :? 伸縮項(xiàng)目以結(jié)束點(diǎn)靠齊center :? 伸縮項(xiàng)目以中心點(diǎn)靠齊justify? :? 伸縮項(xiàng)目平局分布
下面我們都試一下各個(gè)屬性值的效果：
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è)置一個(gè)定高（最好比默認(rèn)情況高）。這時(shí)，就能看到在垂直方向上的效果了。這里我就不再贅述了。
box-align屬性
box-align 屬性用來處理伸縮容器的額外空間。
此屬性的屬性值有：
???? start? ： 伸縮項(xiàng)目以頂部為基準(zhǔn)，清理下部額外空間???? end??? ： 伸縮項(xiàng)目以底部為基準(zhǔn)，清理上部額外空間?? center ： 伸縮項(xiàng)目以中部為基準(zhǔn)，平均清理上下部額外空間baseline ： 伸縮項(xiàng)目以基線為基準(zhǔn)，清理額外的空間stretch? ： 伸縮項(xiàng)目填充整個(gè)容器，默認(rèn)值
同樣的，我們將試一下每個(gè)屬性值的效果：
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 屬性可以使用浮點(diǎn)數(shù)分配伸縮項(xiàng)目的比例。此屬性是給容器內(nèi)的項(xiàng)目設(shè)置的，它們會(huì)基于父容器的寬度來分配它們所占的比例：
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)然也可以有些項(xiàng)目是固定寬度的，那么其他的項(xiàng)目也會(huì)分配剩余的寬度，比如這里第一個(gè)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è)置伸縮項(xiàng)目的顯示位置。
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;
}可以看到：第一個(gè)p元素排在了第二，第二個(gè)p元素排在了第三，第三個(gè)p元素排在了第一。可以單獨(dú)給某一個(gè)p元素設(shè)置此屬性，其他項(xiàng)目會(huì)按照原來的順序做變動(dòng)。
OK，那么舊版本的所有屬性就簡單的介紹完了，更多結(jié)合的用法還是根據(jù)需要自己多動(dòng)手去練習(xí)一下。
這里舉一個(gè)水平垂直居中的例子：
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;
}此時(shí)我們再給p元素設(shè)置一個(gè)固定的高度：
p{
width:150px;
height:200px;
}CSS3 彈性盒子屬性
下表列出了在彈性盒子中常用到的屬性:
屬性 ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 描述
display ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 指定 HTML 元素盒子類型。 ? ?
flex-direction ? ? ? ? ? ? 指定了彈性容器中子元素的排列方式 ? ?
justify-content ? ? ?設(shè)置彈性盒子元素在主軸（橫軸）方向上的對齊方式。 ? ?
align-items ? ? ? ? ? 設(shè)置彈性盒子元素在側(cè)軸（縱軸）方向上的對齊方式。 ? ?
flex-wrap ? ? ? ? ? ? ? 設(shè)置彈性盒子的子元素超出父容器時(shí)是否換行。 ? ?
align-content ? ? ? ?修改 flex-wrap 屬性的行為，類似 align-items, 但不是設(shè)置子元素對齊，而是設(shè)置行對齊 ? ?
flex-flow ? ? ? ? ? ? ? ? ? ? ? flex-direction 和 flex-wrap 的簡寫 ? ?
order ? ? ? ? ? ? ? ? ? ? ? ? ? ?設(shè)置彈性盒子的子元素排列順序。 ? ?
align-self ? ? ? ? ? ? ? ? ? ? 在彈性子元素上使用。覆蓋容器的 align-items 屬性。 ? ?
flex ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 設(shè)置彈性盒子的子元素如何分配空間。 ? ?
