CSS3彈性盒子介紹

彈性盒子是 CSS3 的一種新的佈局模式。
CSS3 彈性盒（ Flexible Box 或 flexbox），是一種當頁面需要適應不同的螢幕大小以及裝置型別時確保元素擁有恰當的行為的佈局方式。
引入彈性盒佈局模型的目的是提供一種更加有效的方式來對一個容器中的子元素進行排列、對齊和分配空白空間。

彈性盒子由彈性容器(Flex container)和彈性子元素(Flex item)組成。
彈性容器通過設定 display 屬性的值為 flex 或 inline-flex將其定義為彈性容器。
彈性容器內包含了一個或多個彈性子元素。

<!-- 彈性容器 -->
<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>
 

彈性容器屬性

1、設定容器為彈性盒子佈局
display: flex;

2、設定彈性盒子中子元素的排列方式
flex-direction: row | column;

3、設定彈性子元素超出父容器時是否換行
flex-warp: nowrap | wrap;

4、flex-direction 和 flex-wrap的簡寫
flex-flow: flex-direction flex-wrap;

5、設定彈性子元素在主軸（橫軸）方向上的對齊方式
justify-content: flex-start | flex-end | center | space-between | space-around;

6、設定彈性子元素在側軸（縱軸）方向上的對齊方式
align-items: stretch | center | flex-start | flex-end | baseline;

7、修改 flex-wrap 屬性的行為，類似align-items, 但不是設定子元素對齊，而是設定行對齊
align-content: stretch | center | flex-start | flex-end | space-between | space-around;

彈性子元素屬性

1、設定彈性子元素如何分配空間
flex: flex-grow flex-shrink flex-basis | auto;

2、設定彈性子元素的擴充套件比率
flex-grow: number;

3、設定彈性子元素的收縮比率
flex-shrink: number;

4、設定彈性子元素的伸縮基準值
flex-basis: px | percent | auto;

5、設定彈性子元素的排列順序，值小的排在前面，可以為負值
order: number;

6、在彈性子元素上使用。覆蓋容器的 align-items 屬性
align-self: auto | stretch | center | flex-start | flex-end | baseline;

實現完美居中

在彈性子元素上設定margin: auto，可以使得該彈性子元素在兩個軸方向上完全居中。

<div class="flex-container">
	<div class="flex-item"></div>
</div>

<style>
.flex-container {display:flex;width:500px;height:500px;background:lightgray;}
.flex-item {margin:auto;width:200px;height:200px;background:darkred;}
</style>

實現效果：

實現柵格系統

類似Bootstrap的柵格系統，實現一個寬度比為1:2:1的三列布局。

<div class="flex-container">
	<div class="flex-item flex-item-l"></div>
	<div class="flex-item flex-item-c"></div>
	<div class="flex-item flex-item-r"></div>
</div>

<style>
.flex-container {display:flex;width:100%;height:300px;background:lightgray;}
.flex-item {margin:10px;background:goldenrod;}
.flex-item-l,
.flex-item-r {flex:1;}
.flex-item-c {flex:2;}
</style>

實現效果：

實現響應式佈局

綜合使用彈性盒子（Flex Box）和媒體查詢（Media Query），可實現強大的響應式佈局。

<div class="flex-container">
    <header class="header">頭部</header>
    <aside class="aside aside1">左側欄</aside>
    <article class="main">主體內容</article>
    <aside class="aside aside2">右側欄</aside>
    <footer class="footer">底部</footer>
</div>

<style>
.flex-container {
    display: flex;  
    flex-flow: row wrap;
    font-weight: bold;
    text-align: center;
}
.flex-container > * {
    padding: 10px;
    flex: 1 100%;
}
.header {background: coral;}
.aside1 {background: moccasin;}
.main {background: cornflowerblue;}
.aside2 {background: violet;}
.footer {background: lightgreen;}

@media all and (min-width: 800px) {
    .aside { flex: 1 auto;}
    .aside1 { order: 1; } 
    .main { flex: 3 auto; order: 2; }
    .aside2 { order: 3; }
    .footer  { order: 4; }
}
</style>

移動端效果：

PC端效果：

後記

雖然當前各主流瀏覽器對CSS3的支援已日趨完善，但在實際專案中為確保各版本瀏覽器的相容性，可在CSS屬性前加相應的字首：

• Chrome & Safari : -webkit-
• Firefox : -moz-
• IE : -ms-