CSS3 彈性盒子(Flex Box)
web 應(yīng)用的樣式設(shè)計(jì)中，布局是非常重要的一部分。布局用來確定頁(yè)面上不同組件和元素的尺寸和位置。隨著響應(yīng)式用戶界面的流行，Web 應(yīng)用一般都要求適配不同的設(shè)備尺寸和瀏覽器分辨率。響應(yīng)式用戶界面設(shè)計(jì)中最重要的一環(huán)就是布局。需要根據(jù)窗口尺寸來調(diào)整布局，從而改變組件的尺寸和位置，以達(dá)到最佳的顯示效果。這也使得布局的邏輯變得更加復(fù)雜。
本文介紹的是 CSS3 規(guī)范中引入的新布局模型：彈性盒模型（flex box）。彈性盒模型可以用簡(jiǎn)單的方式滿足很多常見的復(fù)雜的布局需求。它的優(yōu)勢(shì)在于開發(fā)人員只是聲明布局應(yīng)該具有的行為，而不需要給出具體的實(shí)現(xiàn)方式。瀏覽器會(huì)負(fù)責(zé)完成實(shí)際的布局。該布局模型在主流瀏覽器中都得到了支持。
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è)容器只有一行。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php.cn</title>
<style>
.flex-container {
display: -webkit-flex;
display: flex;
width: 400px;
height: 150px;
background-color: yellow;
}
.flex-item {
background-color: cornflowerblue;
width: 100px;
height: 100px;
margin: 10px;
}
</style>
</head>
<body>
<div class="flex-container">
<div class="flex-item"> 1</div>
<div class="flex-item"> 2</div>
<div class="flex-item"> 3</div>
</div>
</body>
</html>flex-direction 屬性
設(shè)置或檢索伸縮盒對(duì)象的子元素在父容器中的位置。
語(yǔ)法
flex-direction: row | row-reverse | column | column-reverse
row：橫向從左到右排列（左對(duì)齊），默認(rèn)的排列方式。
row-reverse：反轉(zhuǎn)橫向排列（右對(duì)齊，從后往前排，最后一項(xiàng)排在最前面。
column：縱向排列。
row-reverse：反轉(zhuǎn)縱向排列，從后往前排，最后一項(xiàng)排在最上面。
瀏覽器支持
Firefox、Opera 和 Chrome 支持 flex-direction 屬性。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php.cn</title>
<style>
.box{
display:-webkit-flex;
display:flex;
margin:0;padding:10px;list-style:none;background-color:#eee;}
.box li{width:100px;height:100px;border:1px solid #aaa;text-align:center;}
#box{
-webkit-flex-direction:row;
flex-direction:row;
}
#box2{
-webkit-flex-direction:row-reverse;
flex-direction:row-reverse;
}
#box3{
height:500px;
-webkit-flex-direction:column;
flex-direction:column;
}
#box4{
height:500px;
-webkit-flex-direction:column-reverse;
flex-direction:column-reverse;
}
</style>
</head>
<body>
<h2>flex-direction:row</h2>
<ul id="box" class="box">
<li>a</li>
<li>b</li>
<li>c</li>
</ul>
<h2>flex-direction:row-reverse</h2>
<ul id="box2" class="box">
<li>a</li>
<li>b</li>
<li>c</li>
</ul>
<h2>flex-direction:column</h2>
<ul id="box3" class="box">
<li>a</li>
<li>b</li>
<li>c</li>
</ul>
<h2>flex-direction:column-reverse</h2>
<ul id="box4" class="box">
<li>a</li>
<li>b</li>
<li>c</li>
</ul>
</body>
</html>justify-content 屬性
設(shè)置或檢索彈性盒子元素在主軸（橫軸）方向上的對(duì)齊方式。
當(dāng)彈性盒里一行上的所有子元素都不能伸縮或已經(jīng)達(dá)到其最大值時(shí)，這一屬性可協(xié)助對(duì)多余的空間進(jìn)行分配。當(dāng)元素溢出某行時(shí)，這一屬性同樣會(huì)在對(duì)齊上進(jìn)行控制。
語(yǔ)法
justify-content: flex-start | flex-end | center | space-between | space-around
flex-start：彈性盒子元素將向行起始位置對(duì)齊。該行的第一個(gè)子元素的主起始位置的邊界將與該行的主起始位置的邊界對(duì)齊，同時(shí)所有后續(xù)的伸縮盒項(xiàng)目與其前一個(gè)項(xiàng)目對(duì)齊。
flex-end：彈性盒子元素將向行結(jié)束位置對(duì)齊。該行的第一個(gè)子元素的主結(jié)束位置的邊界將與該行的主結(jié)束位置的邊界對(duì)齊，同時(shí)所有后續(xù)的伸縮盒項(xiàng)目與其前一個(gè)項(xiàng)目對(duì)齊。
center：彈性盒子元素將向行中間位置對(duì)齊。該行的子元素將相互對(duì)齊并在行中居中對(duì)齊，同時(shí)第一個(gè)元素與行的主起始位置的邊距等同與最后一個(gè)元素與行的主結(jié)束位置的邊距（如果剩余空間是負(fù)數(shù)，則保持兩端相等長(zhǎng)度的溢出）。
space-between：彈性盒子元素會(huì)平均地分布在行里。如果最左邊的剩余空間是負(fù)數(shù)，或該行只有一個(gè)子元素，則該值等效于'flex-start'。在其它情況下，第一個(gè)元素的邊界與行的主起始位置的邊界對(duì)齊，同時(shí)最后一個(gè)元素的邊界與行的主結(jié)束位置的邊距對(duì)齊，而剩余的伸縮盒項(xiàng)目則平均分布，并確保兩兩之間的空白空間相等。
space-around：彈性盒子元素會(huì)平均地分布在行里，兩端保留子元素與子元素之間間距大小的一半。如果最左邊的剩余空間是負(fù)數(shù)，或該行只有一個(gè)伸縮盒項(xiàng)目，則該值等效于'center'。在其它情況下，伸縮盒項(xiàng)目則平均分布，并確保兩兩之間的空白空間相等，同時(shí)第一個(gè)元素前的空間以及最后一個(gè)元素后的空間為其他空白空間的一半。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php.cn</title>
<style>
.box{
display:-webkit-flex;
display:flex;
width:400px;height:100px;margin:0;padding:0;border-radius:5px;list-style:none;background-color:#eee;}
.box li{margin:5px;padding:10px;border-radius:5px;background:#aaa;text-align:center;}
#box{
-webkit-justify-content:flex-start;
justify-content:flex-start;
}
#box2{
-webkit-justify-content:flex-end;
justify-content:flex-end;
}
#box3{
-webkit-justify-content:center;
justify-content:center;
}
#box4{
-webkit-justify-content:space-between;
justify-content:space-between;
}
#box5{
-webkit-justify-content:space-around;
justify-content:space-around;
}
</style>
</head>
<body>
<ul id="box" class="box">
<li>a</li>
<li>b</li>
<li>c</li>
</ul>
<h2>justify-content:flex-end</h2>
<ul id="box2" class="box">
<li>a</li>
<li>b</li>
<li>c</li>
</ul>
<h2>justify-content:center</h2>
<ul id="box3" class="box">
<li>a</li>
<li>b</li>
<li>c</li>
</ul>
<h2>justify-content:space-between</h2>
<ul id="box4" class="box">
<li>a</li>
<li>b</li>
<li>c</li>
</ul>
<h2>justify-content:space-around</h2>
<ul id="box5" class="box">
<li>a</li>
<li>b</li>
<li>c</li>
</ul>
</body>
</html>align-items 屬性
設(shè)置或檢索彈性盒子元素在側(cè)軸（縱軸）方向上的對(duì)齊方式。
語(yǔ)法
align-items: flex-start | flex-end | center | baseline | stretch
flex-start：彈性盒子元素的側(cè)軸（縱軸）起始位置的邊界緊靠住該行的側(cè)軸起始邊界。
flex-end：彈性盒子元素的側(cè)軸（縱軸）起始位置的邊界緊靠住該行的側(cè)軸結(jié)束邊界。
center：彈性盒子元素在該行的側(cè)軸（縱軸）上居中放置。（如果該行的尺寸小于彈性盒子元素的尺寸，則會(huì)向兩個(gè)方向溢出相同的長(zhǎng)度）。
baseline：如彈性盒子元素的行內(nèi)軸與側(cè)軸為同一條，則該值與'flex-start'等效。其它情況下，該值將參與基線對(duì)齊。
stretch：如果指定側(cè)軸大小的屬性值為'auto'，則其值會(huì)使項(xiàng)目的邊距盒的尺寸盡可能接近所在行的尺寸，但同時(shí)會(huì)遵照'min/max-width/height'屬性的限制。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php.cn</title>
<style>
.box{
display:-webkit-flex;
display:flex;
width:200px;height:100px;margin:0;padding:0;border-radius:5px;list-style:none;background-color:#eee;}
.box li{margin:5px;border-radius:5px;background:#aaa;text-align:center;}
.box li:nth-child(1){padding:10px;}
.box li:nth-child(2){padding:15px 10px;}
.box li:nth-child(3){padding:20px 10px;}
#box{
-webkit-align-items:flex-start;
align-items:flex-start;
}
#box2{
-webkit-align-items:flex-end;
align-items:flex-end;
}
#box3{
-webkit-align-items:center;
align-items:center;
}
#box4{
-webkit-align-items:baseline;
align-items:baseline;
}
#box5{
-webkit-align-items:strecth;
align-items:strecth;
}
</style>
</head>
<body>
<h2>align-items:flex-start</h2>
<ul id="box" class="box">
<li>a</li>
<li>b</li>
<li>c</li>
</ul>
<h2>align-items:flex-end</h2>
<ul id="box2" class="box">
<li>a</li>
<li>b</li>
<li>c</li>
</ul>
<h2>align-items:center</h2>
<ul id="box3" class="box">
<li>a</li>
<li>b</li>
<li>c</li>
</ul>
<h2>align-items:baseline</h2>
<ul id="box4" class="box">
<li>a</li>
<li>b</li>
<li>c</li>
</ul>
<h2>align-items:strecth</h2>
<ul id="box5" class="box">
<li>a</li>
<li>b</li>
<li>c</li>
</ul>
</body>
</html>flex-wrap 屬性
設(shè)置或檢索伸縮盒對(duì)象的子元素超出父容器時(shí)是否換行。
語(yǔ)法
flex-wrap: nowrap | wrap | wrap-reverse
nowrap：當(dāng)子元素溢出父容器時(shí)不換行。
wrap：當(dāng)子元素溢出父容器時(shí)自動(dòng)換行。
wrap-reverse：反轉(zhuǎn) wrap 排列。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php.cn</title>
<style>
.box{
display:-webkit-flex;
display:flex;
width:220px;margin:0;padding:10px;list-style:none;background-color:#eee;}
.box li{width:100px;height:100px;border:1px solid #aaa;text-align:center;}
#box{
-webkit-flex-wrap:nowrap;
flex-wrap:nowrap;
}
#box2{
-webkit-flex-wrap:wrap;
flex-wrap:wrap;
}
#box3{
-webkit-flex-wrap:wrap-reverse;
flex-wrap:wrap-reverse;
}
</style>
</head>
<body>
<ul id="box" class="box">
<li>a</li>
<li>b</li>
<li>c</li>
</ul>
<h2>flex-wrap:wrap</h2>
<ul id="box2" class="box">
<li>a</li>
<li>b</li>
<li>c</li>
</ul>
<h2>flex-wrap:wrap-reverse</h2>
<ul id="box3" class="box">
<li>a</li>
<li>b</li>
<li>c</li>
</ul>
</body>
</html>align-content 屬性
設(shè)置或檢索彈性盒堆疊伸縮行的對(duì)齊方式。
語(yǔ)法
align-content: flex-start | flex-end | center | space-between | space-around | stretch
flex-start：各行向彈性盒容器的起始位置堆疊。彈性盒容器中第一行的側(cè)軸起始邊界緊靠住該彈性盒容器的側(cè)軸起始邊界，之后的每一行都緊靠住前面一行。
flex-end：各行向彈性盒容器的結(jié)束位置堆疊。彈性盒容器中最后一行的側(cè)軸起結(jié)束界緊靠住該彈性盒容器的側(cè)軸結(jié)束邊界，之后的每一行都緊靠住前面一行。
center：各行向彈性盒容器的中間位置堆疊。各行兩兩緊靠住同時(shí)在彈性盒容器中居中對(duì)齊，保持彈性盒容器的側(cè)軸起始內(nèi)容邊界和第一行之間的距離與該容器的側(cè)軸結(jié)束內(nèi)容邊界與第最后一行之間的距離相等。（如果剩下的空間是負(fù)數(shù)，則各行會(huì)向兩個(gè)方向溢出的相等距離。）
space-between：各行在彈性盒容器中平均分布。如果剩余的空間是負(fù)數(shù)或彈性盒容器中只有一行，該值等效于'flex-start'。在其它情況下，第一行的側(cè)軸起始邊界緊靠住彈性盒容器的側(cè)軸起始內(nèi)容邊界，最后一行的側(cè)軸結(jié)束邊界緊靠住彈性盒容器的側(cè)軸結(jié)束內(nèi)容邊界，剩余的行則按一定方式在彈性盒窗口中排列，以保持兩兩之間的空間相等。
space-around：各行在彈性盒容器中平均分布，兩端保留子元素與子元素之間間距大小的一半。如果剩余的空間是負(fù)數(shù)或彈性盒容器中只有一行，該值等效于'center'。在其它情況下，各行會(huì)按一定方式在彈性盒容器中排列，以保持兩兩之間的空間相等，同時(shí)第一行前面及最后一行后面的空間是其他空間的一半。
stretch：各行將會(huì)伸展以占用剩余的空間。如果剩余的空間是負(fù)數(shù)，該值等效于'flex-start'。在其它情況下，剩余空間被所有行平分，以擴(kuò)大它們的側(cè)軸尺寸。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php.cn</title>
<style>
.box{
display:-webkit-flex;
display:flex;
-webkit-flex-wrap:wrap;
flex-direction:wrap;
width:200px;height:200px;margin:0;padding:0;border-radius:5px;list-style:none;background-color:#eee;}
.box li{margin:5px;padding:10px;border-radius:5px;background:#aaa;text-align:center;}
#box{
-webkit-align-content:flex-start;
align-content:flex-start;
}
#box2{
-webkit-align-content:flex-end;
align-content:flex-end;
}
#box3{
-webkit-align-content:center;
align-content:center;
}
#box4{
-webkit-align-content:space-between;
align-content:space-between;
}
#box5{
-webkit-align-content:space-around;
align-content:space-around;
}
#box6{
-webkit-align-content:strecth;
align-content:strecth;
}
</style>
</head>
<body>
<h2>align-content:flex-start</h2>
<ul id="box" class="box">
<li>a</li>
<li>b</li>
<li>c</li>
<li>d</li>
<li>e</li>
<li>f</li>
</ul>
<h2>align-content:flex-end</h2>
<ul id="box2" class="box">
<li>a</li>
<li>b</li>
<li>c</li>
<li>d</li>
<li>e</li>
<li>f</li>
</ul>
<h2>align-content:center</h2>
<ul id="box3" class="box">
<li>a</li>
<li>b</li>
<li>c</li>
<li>d</li>
<li>e</li>
<li>f</li>
</ul>
<h2>align-content:space-between</h2>
<ul id="box4" class="box">
<li>a</li>
<li>b</li>
<li>c</li>
<li>d</li>
<li>e</li>
<li>f</li>
</ul>
<h2>align-content:space-around</h2>
<ul id="box5" class="box">
<li>a</li>
<li>b</li>
<li>c</li>
<li>d</li>
<li>e</li>
<li>f</li>
</ul>
<h2>align-content:strecth</h2>
<ul id="box6" class="box">
<li>a</li>
<li>b</li>
<li>c</li>
<li>d</li>
<li>e</li>
<li>f</li>
</ul>
</body>
</html>order 屬性
設(shè)置或檢索彈性盒模型對(duì)象的子元素出現(xiàn)的順序。
語(yǔ)法
order: <integer>
<integer>：用整數(shù)值來定義排列順序，數(shù)值小的排在前面?？梢詾樨?fù)值。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php.cn</title>
<style>
.box{
display:-webkit-flex;
display:flex;
margin:0;padding:10px;list-style:none;background-color:#eee;}
.box li{width:100px;height:100px;border:1px solid #aaa;text-align:center;}
#box li:nth-child(3){
-webkit-order:-1;
order:-1;
}
</style>
</head>
<body>
<ul id="box" class="box">
<li>a</li>
<li>b</li>
<li>c</li>
<li>d</li>
<li>e</li>
</ul>
</body>
</html>align-self 屬性
設(shè)置或檢索彈性盒子元素自身在側(cè)軸（縱軸）方向上的對(duì)齊方式。
語(yǔ)法
align-self: auto | flex-start | flex-end | center | baseline | stretch
auto：如果'align-self'的值為'auto'，則其計(jì)算值為元素的父元素的'align-items'值，如果其沒有父元素，則計(jì)算值為'stretch'。
flex-start：彈性盒子元素的側(cè)軸（縱軸）起始位置的邊界緊靠住該行的側(cè)軸起始邊界。
flex-end：彈性盒子元素的側(cè)軸（縱軸）起始位置的邊界緊靠住該行的側(cè)軸結(jié)束邊界。
center：彈性盒子元素在該行的側(cè)軸（縱軸）上居中放置。 （如果該行的尺寸小于彈性盒子元素的尺寸，則會(huì)向兩個(gè)方向溢出相同的長(zhǎng)度）。
baseline：如彈性盒子元素的行內(nèi)軸與側(cè)軸為同一條，則該值與'flex-start'等效。其它情況下，該值將參與基線對(duì)齊。
stretch：如果指定側(cè)軸大小的屬性值為'auto'，則其值會(huì)使項(xiàng)目的邊距盒的尺寸盡可能接近所在行的尺寸，但同時(shí)會(huì)遵照'min/max-width/height'屬性的限制。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php.cn</title>
<style>
.box{
display:-webkit-flex;
display:flex;
-webkit-align-items: flex-end;
height:100px;margin:0;padding:10px;border-radius:5px;list-style:none;background-color:#eee;}
.box li{margin:5px;padding:10px;border-radius:5px;background:#aaa;text-align:center;}
.box li:nth-child(1){
-webkit-align-self: flex-end;
align-self: flex-end;
}
.box li:nth-child(2){
-webkit-align-self: center;
align-self: center;
}
.box li:nth-child(3){
-webkit-align-self: flex-start;
align-self: flex-start;
}
.box li:nth-child(4){
-webkit-align-self: baseline;
align-self: baseline;
padding:20px 10px;
}
.box li:nth-child(5){
-webkit-align-self: baseline;
align-self: baseline;
}
.box li:nth-child(6){
-webkit-align-self: stretch;
align-self: stretch;
}
.box li:nth-child(7){
-webkit-align-self: auto;
align-self: auto;
}
</style>
</head>
<body>
<ul id="box" class="box">
<li>a</li>
<li>b</li>
<li>c</li>
<li>d</li>
<li>e</li>
<li>f</li>
<li>g</li>
<li>h</li>
<li>i</li>
</ul>
</body>
</html>flex 屬性
復(fù)合屬性。設(shè)置或檢索伸縮盒對(duì)象的子元素如何分配空間。
如果縮寫flex:1, 則其計(jì)算值為：1 1 0
語(yǔ)法
flex：none | [ flex-grow ] || [ flex-shrink ] || [ flex- basis ]
none：none關(guān)鍵字的計(jì)算值為: 0 0 auto
[ flex-grow ]：定義彈性盒子元素的擴(kuò)展比率。
[ flex-shrink ]：定義彈性盒子元素的收縮比率。
[ flex-basis ]：定義彈性盒子元素的默認(rèn)基準(zhǔn)值。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php.cn</title>
<style>
.box{
display:-webkit-flex;
display:flex;
max-width:400px;height:100px;margin:10px 0 0;padding:0;border-radius:5px;list-style:none;background-color:#eee;}
.box li{background:#aaa;text-align:center;}
.box li:nth-child(1){background:#999;}
.box li:nth-child(2){background:#aaa;}
.box li:nth-child(3){background:#ccc;}
#box li:nth-child(1){-webkit-flex:1;flex:1;}
#box li:nth-child(2){-webkit-flex:1;flex:1;}
#box li:nth-child(3){-webkit-flex:1;flex:1;}
#box2 li:nth-child(1){-webkit-flex:1 0 100px;flex:1 0 100px;}
#box2 li:nth-child(2){-webkit-flex:2 0 100px;flex:2 0 100px;}
#box2 li:nth-child(3){-webkit-flex:3 0 100px;flex:3 0 100px;}
#box3{max-width: 800px;}
#box3 li:nth-child(1){-webkit-flex:1 1 300px;flex:1 1 300px;background:#999;}
#box3 li:nth-child(2){-webkit-flex:1 2 500px;flex:1 2 500px;background:#aaa;}
#box3 li:nth-child(3){-webkit-flex:1 3 600px;flex:1 3 600px;background:#ccc;}
</style>
</head>
<body>
<ul id="box" class="box">
<li>flex:1;</li>
<li>flex:1;</li>
<li>flex:1;</li>
</ul>
<ul id="box2" class="box">
<li>flex:1 0 100px;</li>
<li>flex:2 0 100px;</li>
<li>flex:3 0 100px;</li>
</ul>
<ul id="box3" class="box">
<li>flex:1 1 400px;</li>
<li>flex:1 2 400px;</li>
<li>flex:1 2 400px;</li>
</ul>
</body>
</html>
