CSS3 伸縮布局盒模型
CSS3引入的布局模式Flexbox布局，主要思想是讓容器有能力讓其子項目能夠改變其寬度，高度，以最佳方式填充可用空間。Flex容器使用Flex項目可以自動放大與收縮，用來填補可用的空閑空間。
更重要的是，Flexbox布局方向不可預知，不像常規的布局(塊級從上到下，內聯從左到右)，而那些常規的適合頁面布局，但對於支持大型或者復雜的應用程序就缺乏靈活性。
如果常規布局是基於塊和內聯文本流方向，那么Flex布局就是基於“Flex-flow”方向。先來了解一下伸縮盒模型的一些專用術語。
主軸：Flex容器的主軸主要用來配置Flex項目。他不一定是水平的，這主要取決於fle-direction屬性。
主軸起點，主軸終點：Flex項目的配置從容器的主軸起點邊開始，往主軸終點邊結束。
主軸長度：Flex項目在主軸方向的寬度或高度就是項目的主軸長度，Flex項目的主軸長度屬性是width或height屬性，由哪一個對着主軸方向決定。
側軸：與主軸垂直的軸稱作側軸，是側軸方向的延伸。
側軸起點，側軸終點：伸縮行的配置從容器的側軸起點邊開始，往側軸終點邊結束。
側軸長度：Flex項目在側軸方向的寬度或高度就是項目的側軸長度，Flex項目的側軸長度屬性是widht或height屬性，由哪一個對着主軸方向決定。
Flex布局的語法規范經過幾年發生了很大的變化，也給Flexbox的使用帶來一定的局限性，因為語法規范版本眾多，瀏覽器支持不一致，致使Flexbox布局使用不多。Flexbox布局語法規范主要分成三種。
舊版本，2009年版本，是最早的伸縮布局，各大主流瀏覽器對其支持性略有不同，可惜的是，對Flexbox布局的各屬性支持也不完全，在使用時還需添加各瀏覽器的前綴。
混合版本，2011年版本，只有IE10支持。
最新版本,2012年版本,除了Safari瀏覽器不支持外，其他最新瀏覽器都支持這個版本。
Flex容器屬性
display
要改變元素的模式為伸縮容器，需要使用display屬性。
display:flex | inline-flex
flex:設置為塊級伸縮容器。
inline-flex:設置為內聯級伸縮容器。
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title></title>
<style>
*{
margin:0;
padding:0;
}
div>div{
width:100px;
height:100px;
line-height:100px;
border:1px solid;
text-align:center;
margin:10px;
}
#box{
display:-moz-box;
display:-webkit-box;
display:-ms-flexbox;
display:-webkit-flex;
display:flex;
border:1px solid;
margin:20px;
}
#inline{
display:-moz-inline-box;
display:-webkit-inline-box;
display:-ms-inline-flexbox;
display:-webkit-inline-flexbox;
display:inline-flex;
border:1px solid;
margin:20px;
}
</style>
</head>
<body>
<div id="box">
<div>A</div>
<div>B</div>
<div>C</div>
<div>D</div>
</div>
<div id="inline">
<div>A</div>
<div>B</div>
<div>C</div>
<div>D</div>
</div>
</body>
</html>
塊級伸縮容器與內聯級伸縮容器類似，默認都是從左往右排列，唯一不同的是塊級伸縮容器獨占一行，而內聯級伸縮容器隨着內容改變。
Flex容器不是塊容器，因此有些設計用來控制塊布局的屬性在伸縮布局中不適用。浮動無法影響伸縮容器，而且伸縮容器的margin與其內容的margin不會重疊。如果內聯伸縮容器設置了浮動，元素將會以塊級伸縮容器顯示。
flex-direction
定義Flex項目在Flex容器中放置的方向。
flex-direction:row | row-reverse | column | column-reverse
row:默認值，如果書寫方式是ltr，那么Flex項目從左向右排列；如果書寫方式是rtl，那么Flex項目從右向左排列。
row-reverse:如果書寫方式是ltr，那么Flex項目從右向左排列；如果書寫方式是rtl，那么Flex項目從左向右排列。
column:和row類似，方向從上到下排列。
column-reverse:和row-reverse類似，方向從下到上排列。
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title></title>
<style>
*{
margin:0;
padding:0;
}
div>div{
width:100px;
height:100px;
line-height:100px;
border:1px solid;
text-align:center;
margin:10px;
}
.box{
display:-moz-box;
display:-webkit-box;
display:-ms-flexbox;
display:-webkit-flexbox;
display:flex;
border:1px solid;
margin:20px;
}
.box1{
/*定義Flex項目在Flex容器中放置的方向,從左往右。*/
-moz-box-orient:block-axis;
-moz-box-direction:normal;
-webkit-box-orient:block-axis;
-webkit-box-direction:normal;
flex-direction:row;
}
.box2{
/*定義Flex項目在Flex容器中放置的方向，從右往左。*/
-moz-box-orient:block-axis;
-moz-box-direction:reverse;
-webkit-box-orient:block-axis;
-webkit-box-direction:reverse;
flex-direction:row-reverse;
}
.box3{
/*定義Flex項目在Flex容器中放置的方向，從上往下。*/
-moz-box-orient:inline-axis;
-moz-box-direction:normal;
-webkit-box-orient:inline-axis;
-webkit-box-direction:normal;
flex-direction:column;
}
.box4{
/*定義Flex項目在Flex容器中放置的方向，從下往上。*/
-moz-box-orient:inline-axis;
-moz-box-direction:reverse;
-webkit-box-orient:inline-axis;
-webkit-box-direction:reverse;
flex-direction:column-reverse;
}
</style>
</head>
<body>
<div class="box box1">
<div>A</div>
<div>B</div>
<div>C</div>
<div>D</div>
</div>
<div class="box box2">
<div>A</div>
<div>B</div>
<div>C</div>
<div>D</div>
</div>
<div class="box box3">
<div>A</div>
<div>B</div>
<div>C</div>
<div>D</div>
</div>
<div class="box box4">
<div>A</div>
<div>B</div>
<div>C</div>
<div>D</div>
</div>
</body>
</html>
默認值flex-direction等於row時，Flex項目從左往右排列。
flex-direction等於row-reverse時，Flex項目從右往左排列。
flex-direction等於column時，Flex項目從上往下排列。
flex-direction等於column-reverse時，Flex項目從下往上排列。
flex-wrap
默認情況下，Flex項目都盡可能在一行顯示，你可以根據flex-wrap的屬性值來改變，讓Flex項目多行顯示。
flex-wrap:nowrap | wrap | wrap-reverse
nowrap:默認值，單行顯示，如果書寫方式是ltr，Flex項目從左往右排列；如果書寫方式是trl，Flex項目從右往左排列。
wrap:多行顯示，如果書寫方式是ltr，Flex項目從左往右排列；如果書寫方式是trl，Flex項目從右往左排列。
wrap-reverse:多行顯示，如果書寫方式是ltr，Flex項目從右往左排列；如果書寫方式是trl，Flex項目從左往右排列。
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title></title>
<style>
*{
margin:0;
padding:0;
}
.box{
display:-moz-box;
display:-webkit-box;
display:-ms-flexbox;
display:-webkit-flexbox;
display:flex;
border:1px solid;
margin:20px;
-moz-box-lines:multiple;
/*定義伸縮換行屬性為nowrap(默認值)*/
flex-wrap:nowrap;
}
.box div{
width:100px;
height:100px;
line-height:100px;
border:1px solid;
text-align:center;
margin:10px;
}
</style>
</head>
<body>
<div class="box">
<div>A</div>
<div>B</div>
<div>C</div>
<div>D</div>
<div>E</div>
<div>F</div>
<div>G</div>
<div>H</div>
<div>I</div>
<div>J</div>
<div>K</div>
<div>L</div>
</div>
</body>
</html>
因為默認值nowrap不准換行，伸縮容器容納不下伸縮項目時，各伸縮項目會根據默認的收縮比例進行縮小以適應伸縮容器的寬度。
.box{
...
flex-wrap:wrap;
}
flex-wrap等於wrap時，伸縮容器容不下伸縮項目時自動換行了。
.box{
...
flex-wrap:wrap-reverse;
}
flex-wrap等於wrap-reverse時，伸縮容器容不下伸縮項目時換行了。不同的是換行的方向相反。
flex-flow
這是flex-direction和flex-wrap兩個屬性的縮寫,默認值是row nowrap。
flex-flow:flex-direction || flex-wrap
justify-content
用來設置伸縮項目在主軸上的對齊方式。指定如何在伸縮項目之間分布伸縮容器額外空間。當一行上的所有伸縮項目不能伸縮或可伸縮但是已達到最大長度時，這一屬性才會對伸縮容器額外空間進行分配。當伸縮項目溢出某一行時，這一屬性也會在項目的對齊上施加一些控制。
justify-content:flex-start | flex-end | center | space-between | space-around
flex-start:默認值，伸縮項目向一行的起始位置靠齊。伸縮容器沿着布局軸方向的所有額外空間都被置於布局軸的末尾。
flex-end:和flex-start相反，伸縮項目向一行的結束位置靠齊。伸縮容器沿着布局軸方向的所有額外空間都被置於布局軸的開始。
center:伸縮項目向一行的中間位置靠齊。伸縮容器的所有額外空間平均分布在第一伸縮項目前面和最后一個伸縮項目的后面。
space-between:伸縮項目會平均分布在行里。伸縮容器的所有額外空間平均分布在所有伸縮項目之間，但是在第一個伸縮項目之前和最后一個伸縮項目之后不分配空間，也就是說，第一個伸縮項目靠齊開始位置，最后一個伸縮項目靠齊結束位置。
space-around:伸縮項目會品均分布在行里。伸縮容器的所有額外空間品均分布在所有伸縮項目之間，但是第一個伸縮項目之前與最后一個伸縮項目之后只分配其他位置得到額外空間的一半。
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title></title>
<style>
*{
margin:0;
padding:0;
}
.box{
width:500px;
height:500px;
border:1px solid;
margin:20px;
display:flex;
justify-content:flex-start;
}
body>div:first-child{
flex-flow:row nowrap;
}
body>div:last-child{
flex-flow:column nowrap;
}
.box div{
width:100px;
height:100px;
line-height:100px;
border:1px solid;
text-align:center;
margin:10px;
}
</style>
</head>
<body>
<div class="box">
<div>A</div>
<div>B</div>
<div>C</div>
</div>
<div class="box">
<div>A</div>
<div>B</div>
<div>C</div>
</div>
</body>
</html>
justify-content等於默認值flex-start時，伸縮項目在主軸起點處對齊，所有額外空間在最后一個伸縮項目的后面。
.box{
...
justify-content:flex-end;
}
justify-content等於flex-end時，伸縮項目在主軸結束處對齊，所有額外空間在第一個伸縮項目前面。
.box{
...
justify-content:center;
}
justify-content等於center時，所有項目在容器主軸中間處對齊，額外空間在第一個前面和最后一個后面。
.box{
...
justify-content:space-between;
}
justity-content等於space-between時，第一個項目在主軸開始處，最后一個項目在主軸結束處，所有額外空間被其他項目平分。
.box{
...
justify-content:space-around;
}
justify-content等於space-around時，類似於space-between，但是第一個項目前面與最后一個項目后面分配了其他項目擁有額外空間一半的空間。
align-items
align-items屬性和justify-content同樣是用來管理伸縮容器額外空間，不同的是，justify-content是用來管理伸縮容器主軸方向的額外空間，而align-items是用來管理伸縮容器側軸方向的額外空間。
align-items:flex-start | flex-end | center | baseline | stretch
flex-start:伸縮項目在側軸起點邊的外邊距緊靠住該行在側軸起始的邊。
flex-end:伸縮項目在側軸終點邊的外邊距靠住該行在側軸終點的邊。
center:伸縮項目的外邊距盒在該行的側軸上居中放置。
baseline:如果伸縮項目的行內軸與側軸為同一條，則該值和flex-start等效。其它情況下，該值將參與基線對齊。所有參與該對齊方式的伸縮項目將按下列方式排列：首先將這些伸縮項目的基線進行對齊，隨后其中基線至側軸起點邊的外邊距距離最長的那個項目將緊靠住該行在側軸起點的邊。
stretch:如果側軸長度屬性的值為auto，則此值會使項目的外邊距盒的尺寸在遵照min/max-width/height屬性的限制下盡可能接近所在行的尺寸。
.box{
...
align-items:flex-start;
}
align-items等於flex-start時，伸縮項目在側軸起點處對齊，額外空間在側軸終點處。
.box{
...
align-items:flex-end;
}
align-items等於flex-end時，伸縮項目在側軸結束處對齊，額外空間在側軸起點處。
.box{
...
align-items:center;
}
align-items等於center時，伸縮項目在側軸中間處對齊，額外空間在側軸兩端。
.box{
...
align-items:baseline;
}
align-items等於baseline時，如果伸縮項目的行內軸與側軸為同一條，則該值和flex-start等效，那么額外空間在側軸結束處。
.box{
...
align-items:stretch;
}
align-items等於stretch時，伸縮項目往側軸方向拉伸以占用額外空間。
align-content
是伸縮項目占多行時在側軸方向的對齊屬性，這個屬性將對每一行起作用而不是每個伸縮項目。
align-content:flex-start | flex-end | center | space-between | space-around | stretch
flex-start:各行向伸縮容器的起點位置堆疊。
flex-end:各行向伸縮容器的結束位置堆疊。
center:各行向伸縮容器的中間位置堆疊。
space-between:各行在伸縮容器中平均分布。
space-around:各行在伸縮容器中品均分布，在兩邊各有一半空間。
stretch:默認值，各行將會伸展以占用額外空間。
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title></title>
<style>
*{
margin:0;
padding:0;
}
.box{
border:1px solid;
margin:20px;
display:flex;
align-content:flex-start;
height:500px;
width:500px;
}
body>div:first-child{
flex-flow:row wrap;
}
body>div:last-child{
flex-flow:column wrap;
}
.box div{
min-width:100px;
line-height:100px;
border:1px solid;
text-align:center;
margin:10px;
}
</style>
</head>
<body>
<div class="box">
<div>A</div>
<div>B</div>
<div>C</div>
<div>A</div>
<div>B</div>
<div>C</div>
<div>A</div>
<div>B</div>
<div>C</div>
<div>A</div>
<div>B</div>
</div>
<div class="box">
<div>A</div>
<div>B</div>
<div>C</div>
<div>A</div>
<div>B</div>
<div>C</div>
<div>A</div>
<div>B</div>
<div>C</div>
<div>A</div>
<div>B</div>
</div>
</body>
</html>
align-content等於flex-start時，各行向側軸起點處對齊，額外空間在側軸終點處。
.box{
...
align-content:flex-end;
}
align-content等於flex-end時，各行向側軸終點處對齊，額外空間在側軸開始處。
.box{
...
align-content:center;
}
align-content等於center時，各行向側軸中間處對齊，額外空間在側軸兩端。
.box{
...
align-content:space-between;
}
align-content等於space-between時，第一行向側軸起點處對齊，最后一行向側軸終點處對齊，額外空間被除了第一行與最后一行處平分。
.box{
...
align-content:space-around;
}
align-content等於space-around時，第一行向側軸起點處對齊，最后一行向側軸終點處對齊，第一行與最后一行的額外空間是其他處額外空間的一半。
.box{
...
align-content:stretch;
}
align-content等於默認值stretch時，各行將沿着側軸方向伸展以占用額外空間。
Flex項目屬性
order
默認情況下，Flex項目是按照文檔流的結構順序排列，在Flexbox模型中，可以通過order屬性來改變伸縮項目出現在文檔中的順序。
order:<number>;
number可以是負值，Flexbox容器將根據各項目中order值的大小進行排列。
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title></title>
<style>
*{
margin:0;
padding:0;
}
.box{
border:1px solid;
margin:20px;
display:inline-flex;
flex-flow:row wrap;
align-items:flex-start;
}
.box div{
min-width:100px;
line-height:100px;
border:1px solid;
text-align:center;
margin:10px;
}
.box div:nth-child(1){
order:2;
}
.box div:nth-child(2){
order:1;
}
.box div:nth-child(3){
order:3;
}
</style>
</head>
<body>
<div class="box">
<div>A</div>
<div>B</div>
<div>C</div>
</div>
</body>
</html>
flex-grow
定義一個Flex項目的擴大比例。
flex-grow:<number>
默認值為0，不能取負值，沒有單位。
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title></title>
<style>
*{
margin:0;
padding:0;
}
.box{
border:1px solid;
margin:20px;
display:flex;
flex-flow:row wrap;
align-items:flex-start;
}
.box div{
min-width:100px;
line-height:100px;
border:1px solid;
text-align:center;
margin:10px;
}
.box div:nth-child(1){
flex-grow:1;
}
.box div:nth-child(2){
flex-grow:2;
}
.box div:nth-child(3){
flex-grow:1;
}
</style>
</head>
<body>
<div class="box">
<div>A</div>
<div>B</div>
<div>C</div>
</div>
</body>
</html>
如果伸縮項目的flex-grow設置為1，每個伸縮項目將設置一個大小相等的額外空間。如果給其中一個伸縮項目設置flex-grow設置為2，這個伸縮項目所占的額外空間是其他伸縮項目所占額外空間的2倍。
也可以這樣理解，把上例各項目的flex-grow值加起來等於4，就是把額外空間分成4份，比例為1的占1份，比例為2的占2份。
flex-shrink
定義一個Flex項目的縮小比例。
flex-shrink:<number>
默認值為1。
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title></title>
<style>
*{
margin:0;
padding:0;
}
.box{
width:200px;
border:1px solid;
margin:20px;
display:flex;
flex-flow:row nowrap;
}
.box div{
width:100px;
line-height:100px;
border:1px solid;
text-align:center;
margin:10px;
}
.box div:nth-child(1){
flex-shrink:1;
}
.box div:nth-child(2){
flex-shrink:2;
}
.box div:nth-child(3){
flex-shrink:1;
}
</style>
</head>
<body>
<div class="box">
<div>A</div>
<div>B</div>
<div>C</div>
</div>
</body>
</html>
與flex-grow類似，也是處理伸縮容器額外空間的屬性，不同的是，flex-grow處理的是伸縮容器內部剩下的額外空間，而flex-shrink處理的是伸縮容器外部溢出的額外空間。上例中將溢出的額外空間分成4份，收縮比例為1的占1份，收縮比例為2的占2份，如果不設置收縮比例，默認的比例為1。
flex-basis
定義了Flex項目在分配Flex容器剩余空間之前的一個默認尺寸。
flex-basis:<length> | auto
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title></title>
<style>
*{
margin:0;
padding:0;
}
.box{
width:500px;
border:1px solid;
margin:20px;
display:flex;
flex-flow:row nowrap;
}
.box div{
width:100px;
line-height:100px;
border:1px solid;
text-align:center;
margin:10px;
}
.box div:nth-child(1){
flex-basis:150px;
}
.box div:nth-child(2){
flex-basis:200px;
}
.box div:nth-child(3){
flex-basis:50px;
}
</style>
</head>
<body>
<div class="box">
<div>A</div>
<div>B</div>
<div>C</div>
</div>
</body>
</html>
flex-basis類似於width，用來設置flex-basis長度並指定伸縮基准值，也就是根據可伸縮比例計算出額外空間的分布之前，伸縮項目主軸長度的起始數值。
如果設置為0，內容不在考慮周圍額外空間。如果設置為auto，額外空間會基於flex-grow值做分布。如下所示：
flex
flex是flex-grow，flex-shrink，flex-basis三個屬性的縮寫。第二個和第三個參數是可選值。默認值是0 1 auto。
flex: none | [<flex-grow> <flex-shrink>? || <flex-basis>]
建議使用縮寫屬性。如果flex取值為none，等於0 0 auto。
align-self
用來在單獨的伸縮項目上覆寫默認的對齊方式。
align-self:auto | flex-start | flex-end | center | baseline | stretch
align-self的值與align-items一樣。
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title></title>
<style>
*{
margin:0;
padding:0;
}
.box{
width:400px;
border:1px solid;
margin:20px;
display:flex;
flex-flow:column wrap;
}
.box div{
width:100px;
line-height:100px;
border:1px solid;
text-align:center;
margin:10px;
}
.box div:nth-child(1){
align-self:flex-start;
}
.box div:nth-child(2){
align-self:center;
}
.box div:nth-child(3){
align-self:flex-end;
}
</style>
</head>
<body>
<div class="box">
<div>A</div>
<div>B</div>
<div>C</div>
</div>
</body>
</html>
CSS3 Flexbox完。