Flexbox布局
Flexbox
Flexbox（伸縮布局盒）是css3中的一個新的布局模式，其主要思想是給容器控制項目的寬度、高度的能力，使flex項目可以自動充滿容器的可用空間。
Flexbox由伸縮容器和伸縮項目組成。一個設有「display:flex」或「display:inline-flex」的元素是一個伸縮容器，伸縮容器的子元素被稱為伸縮項目，這些子元素使用伸縮布局模型來排版。設置為flex 的容器被渲染為一個塊級元素，而設置為inline-flex的容器則渲染為一個行內元素。
<style> .display-test{ width:50px; height:50px; margin:10px; border:1px solid red; }
/*將伸縮容器渲染為行內元素*/ .display-test{ display:-webkit-inline-flex; display: inline-flex; } </style> <body> <div class="display-test">1</div> <div class="display-test">2</div> <div class="display-test">3</div> <div class="display-test">4</div> </body>
<style>
.display-test{
width:50px;
height:50px;
margin:10px;
border:1px solid red;
}
/*將伸縮容器渲染為塊級元素*/
.display-test{
display:-webkit-flex;
display: flex;
}
</style>
<body>
<div class="display-test">1</div>
<div class="display-test">2</div>
<div class="display-test">3</div>
<div class="display-test">4</div>
</body>
概念和術語
伸縮容器相關屬性
flex-direction伸縮流的方向
在Flexbox中使用主軸和側軸的概念，伸縮行跟隨主軸，側軸垂直於主軸，默認情況下，伸縮行和文本方向一致：從左至右，從上往下。而flex-direction允許我們更改伸縮容器的主軸方向，常見取值如下：
row：默認值，表示伸縮項目根據書寫默認的方向布局（默認的從左至右，從上往下）。
row-reverse: 主軸起點和主軸終點交換。如果書寫模式是從左至右，伸縮項目則是從右往左顯示。
column: 主軸和側軸交換。如果書寫系統是垂直的，那麽伸縮項目也是垂直顯示的。
column-reverse: 和 column 一樣，但是方向相反。
<style>
.flex-container{
display: flex;
width:200px;
height:200px;
border:1px solid blue;
}
.item{
width:60px;
height:40px;
border:1px solid red;
margin:5px;
}
.flex-container{
flex-direction:row;
}
</style>
<div class="flex-container">
<div class="item">第一個</div>
<div class="item">第二個</div>
<div class="item">第三個</div>
</div>
當flex-direction取默認值row時，伸縮行與文本方向保持一致，采用默認的從上到下，從左到右的布局，得到左圖的效果。當我們更改flex-direction的值為column時，主軸和側軸交換，得到右圖的效果。
justify-content主軸對齊
justify-content屬性用於在主軸上對齊伸縮項目。只有當一行上的所有伸縮項目都不能伸縮或可伸縮但是已經達到其最大長度時，這一屬性才會對多余的空間進行分配。當項目溢出某一行時，這一屬性也會在項目的對齊上施加一些控制。常見取值如下：
flex-start：默認值，伸縮項目向一行的起始位置靠齊。
flex-end：伸縮項目向一行的結束位置靠齊。
center：伸縮項目向一行的中間位置靠齊，該行的伸縮項目將相互對齊並在行中居中對齊，且第一個項目與起點邊的距離等同於最後一個項目與終點邊的距離（如果剩余空間為負數，則保持兩端溢出的長度相等）。
space-between：伸縮項目會平均地分布在一行裏，第一個項目和最後一個項目靠近邊緣，其他項目在確保兩兩之間的空白空間相等的情況下平均分布。當剩余空間是負數，或該行只有一個伸縮項目，則此值等效於flex-start。
space-around：伸縮項目會平均地分布在行裏，伸縮項目在確保兩兩之間的空白空間相等，同時第一個元素前的空間以及最後一個元素後的空間為其他空白空間的一半下平均分布。當剩余空間是負數，或該行只有一個伸縮項目，則該值等效於center。
<style>
.flex-container{
display: flex;
width:260px;
height:100px;
border:1px solid blue;
}
.item{
width:60px;
height:40px;
border:1px solid red;
}
.flex-container{
justify-content: space-between;
}
</style>
<div class="flex-container">
<div class="item">第一個</div>
<div class="item">第二個</div>
<div class="item">第三個</div>
</div>
當justify-content的取值為 space-between時，得到左圖的效果，此時主軸起點和終點位置沒有空白，其他兩兩項目之間的空白相等；當justify-content的取值為 space-around時，得到右圖效果，此時主軸起點和終點位置的空白等於其他兩兩項目之間的空白的一半。
align-items側軸對齊
align-items屬性用於在伸縮容器的當前行的側軸上進行對齊，類似於justify-content屬性，但是是另一個方向。常見取值有flex-start（默認值）、flex-end、center、baseline、stretch，其中stretch會將伸縮項目從側軸起點拉伸至側軸終點，baseline將參與基線對齊。所有參與該對齊方式的伸縮項目將按下列方式排列：首先將這些伸縮項目的基線進行對齊，隨後其中基線至側軸起點邊的外邊距距離最長的那個項目將緊靠住該行在側軸起點的邊。
.flex-container{
display: flex;
width:260px;
height:100px;
border:1px solid blue;
}
.item{
width:60px;
border:1px solid red;
margin:5px;
}
.one{height:30px;}
.two{height:50px;}
.three{height:80px;}
.flex-container{
align-items:center;
}
<div class="flex-container">
<div class="item one">第一個</div>
<div class="item two">第二個</div>
<div class="item three">第三個</div>
</div>
上圖為align-items的取值為center時的效果，此時伸縮項目的外邊距盒在該行的側軸上居中放置（如果伸縮行的尺寸小於伸縮項目，則伸縮項目會向兩個方向溢出相同的量），需要註意的是，當取值為baseline時，如果伸縮項目的行內軸與側軸為同一條，則該值與flex-start等效。
flex-wrap伸縮行換行
默認情況下，每個伸縮容器都只有一個伸縮行，而使用 flex-wrap 時，我們可以為伸縮容器創建多個伸縮行。該屬性常見取值如下：
nowrap：默認值，伸縮容器為單行。
wrap：伸縮容器為多行，在一個伸縮行容不下所有伸縮項目時，伸縮項目會換行到一條新增的伸縮行上。新增的伸縮行根據側軸的方向添加。
wrap-reverse：和wrap一樣，只是新的伸縮行會被添加到側軸的反方向。
.flex-container{
display: flex;
width:200px;
height:100px;
border:1px solid blue;
}
.item{
width:80px;
height:30px;
border:1px solid red;
}
.flex-container{
flex-wrap:nowrap;
}
<div class="flex-container">
<div class="item">第一個</div>
<div class="item">第二個</div>
<div class="item">第三個</div>
<div class="item">第四個</div>
</div>
默認情況下，即flex-wrap 取值為nowrap時，伸縮容器為單行，如左圖所示，當改變flex-wrap 的值為wrap-reverse時，伸縮容器為多行，且新的伸縮行被添加到側軸的飯方向。
align-content堆棧伸縮行
align-content用於更改flex-wrap的行為，和align-items相似，但是不是對齊伸縮項目，它對齊的是伸縮行，因此本屬性在只有一行的伸縮容器上沒有效果，常見取值包括stretch（默認值）、flex-start、flex-end、center、space-between、space-around，這些值同justify-content和align-items中的值一樣。
.flex-container{
display: flex;
width:200px;
height:150px;
border:1px solid blue;
flex-wrap:wrap;
}
.item{
width:80px;
height:30px;
border:1px solid red;
}
.flex-container{
align-content:space-around;
}
<div class="flex-container">
<div class="item">第一個</div>
<div class="item">第二個</div>
<div class="item">第三個</div>
<div class="item">第四個</div>
<div class="item">第五個</div>
<div class="item">第六個</div>
</div>
默認情況下，即align-content取值為stretch時，各行伸展平分剩余空間，如左圖所示；當align-content取值為flex-end時，各行向伸縮容器的結束位置堆疊，且最後一行在靠近側軸終點邊位置沒有空白，如中間圖所示；當align-content取值為space-around時，各行會在保持兩兩之間的空間相等，同時第一行前面及最後一行後面的空間是其他空間的一半的狀況下排列，如果剩余的空間是負數或伸縮容器中只有一行，該值等效於center，如右圖所示。
flex-flow伸縮方向與換行
flex-flow是flex-direction和flex-wrap的縮寫，常見取值如下：
row：主軸是行內方向，沒有換行
column wrap：主軸是塊的方向，換行往行內方向，在英文頁面中，主軸是上往下，往右換行
row-reverse wrap-reverse：主軸與行內方向相反（右到左），新行換行向上。
.flex-container{
display: flex;
width:150px;
height:100px;
border:1px solid blue;
}
.item{
width:50px;
height:30px;
border:1px solid red;
margin:5px;
}
.flex-container{
flex-flow:row-reverse wrap-reverse;
}
<div class="flex-container">
<div class="item">第一個</div>
<div class="item">第二個</div>
<div class="item">第三個</div>
<div class="item">第四個</div>
</div>
當flex-flow取值為row時，效果如左圖；當flex-flow取值為column wrap時，效果如中間圖，當flex-flow取值為row-reverse wrap-reverse時，效果如右圖。
伸縮項目的屬性
order顯示順序
在伸縮項目中，可以通過設置order屬性的值來調整它們渲染時的順序，伸縮容器會從序號最小的項目開始排序。該屬性默認值為0。
.flex-container{
display: flex;
width:200px;
height:80px;
border:1px solid blue;
}
.item{
width:60px;
height:40px;
border:1px solid red;
margin:5px;
}
.one{order:1;}
.two{order:-1;}
<div class="flex-container">
<div class="item one">第一個</div>
<div class="item two">第二個</div>
<div class="item three">第三個</div>
</div>
默認情況下，三個伸縮項目會按照順序一次渲染，當為其中兩個添加order值時，會按照-1、0、1的順序依次渲染，得到上面所示效果。常用於點擊事件中，將當前點擊項提前。
Flexbox布局