css3中引入的布局模式flexbox布局，主要是讓容器有能力讓其子專案能夠改變其寬度、高度（甚至順序），以最佳的方式填充可用空間（適配所有型別的現實裝置和螢幕大小）。
flexbox布局功能主要有以下幾點：
螢幕和瀏覽器視窗大小改變時可以靈活調整布局
指定伸縮專案沿著主軸或側軸按比例分配額外空間（伸縮容器額外空間），來調整專案大小。（注意，額外空間的概念要理清楚！）
指定伸縮專案沿著主軸或側軸將伸縮容器額外空間，分配到伸縮專案之前、之後或之間
指定如何將垂直於元素布局周的額外空間分布到該元素的周圍
控制元素在頁面上的布局方向
可以在瀏覽器渲染周不按照文件流先後順序重排伸縮專案順序
參考：包含每個引數的案例
1.伸縮容器display(用於伸縮容器)
display:flex | inline-flex;
相容寫法
display
: -webkit-flex;
/*safari,opera,chrome*/
display
: -moz-flex;
/*firefox*/
display
: -ms-flexbox;
/*ie*/
display
: flex;
inline-flex：內聯伸縮容器
注意：css的columns在伸縮容器上沒有效果；float、clear和vertical-align在伸縮專案上沒有效果。
2.伸縮流方向flex-direction(用於伸縮容器)
flex-direction：row | row-reverse
| column | column-reverse ;
column:類似於row，不過是從上到下排列
row-reverse和column-reverse是與對應的row和column排列方向相反
主要用來建立主軸，從而定義 了伸縮專案放置在伸縮容器的方向
3.伸縮換行flex-wrap(用於伸縮容器)
flex-wrap：nowrap | wrap | wrap-reversewrap：伸縮容器多行顯示，在ltr和rtl排版方式下按對應方向排列；
wrap-reverse：伸縮容器多行顯示，但在ltr排版下，伸縮專案從右向左排列；rtl排版下，伸縮專案從左向右排列（和wrap相反）
主要用來定義伸縮容器裡是單行顯示還是多行顯示，側軸的方向決定了新行堆放的方向
4.伸縮流方向和換行flex-flow(用於伸縮容器)
flex-flow：
||
同時定義了伸縮容器的主軸和側軸。
5.主軸對齊justify-content(用於伸縮容器)
flex-start：伸縮專案向一行的起始位置靠齊
flex-end：伸縮專案向一行的結束為止靠齊
center：伸縮專案向一行的中間位置靠齊
space-between：伸縮專案會平均分布在行裡，第乙個和最後乙個伸縮專案靠著開始和結束位置
space-around：伸縮專案會平均分布在行裡，兩端保留一半的空間
主要用來定義伸縮專案沿著主軸線的對齊方式。
6.側軸對齊align-items(用於伸縮容器)和align-self(用於伸縮專案)
設定伸縮專案在側軸的對齊方式有兩種。一種是伸縮專案行在側軸的對齊方式，由屬性align-items控制；另一種是伸縮專案自身在側軸的對齊方式，主要由屬性align-self控制
align-items：flex-start
| flex-end
| center | baseline | strecth
align-self：flex-start
| flex-end
| center | baseline | strecth
-webkit
-align
-items: center;/*safari,opera,chrome*/
-moz
-align
-items: center;/*firefox*/
-ms-flex
-align: center;/*ie*/
align-items: center;
flex-end：伸縮專案在側軸終點邊的外邊距靠住該行在側軸終點邊
center：伸縮專案的外邊距盒在該行的側軸上居中放置
baseline：伸縮專案根據伸縮專案的基線對齊
strech：預設值，伸縮專案拉伸填充整個伸縮容器
7.堆疊伸縮行align-content
align-content會改變flex-wrap的行為。與align-items相似，但不是對齊伸縮專案，對齊的是伸縮行。
flex-start：各行向伸縮容器的起點位置堆疊
flex-end：各行向伸縮容器的終點位置堆疊
center：伸各行向伸縮容器的中間位置堆疊
space-between：各行在伸縮容器中平均分布
space-around：各行在伸縮容器中平均分布，在兩邊各有一半空間
strech：預設值，各行將會伸展以占用額外的空間
這個屬性只有伸縮專案有多行時才生效，在flex-wrap為wrap時，並且沒有足夠的空間把伸縮專案行放在同一行中。該屬性對每一行起作用而不是每個伸縮專案。
8.伸縮性flex
設定屬性flex的伸縮容器會等比地按照各伸縮專案的擴充套件比率分配額外的空間，也會按照收縮比率縮小各伸縮專案以避免伸縮專案溢位伸縮容器
flex：none | [ ? || ]
相容寫法：
-webkit-flex
: 1;
/*safari,opera,chrome*/
-moz-flex
: 1;
/*firefox*/
-ms-flex
: 1;
/*ie*/
flex
: 1;
flex-shrink：收縮比率
flex-basis：伸縮基準值
flex屬性可以用來指定可伸縮長度的部件：擴充套件比率、收縮比率和伸縮基準值
9.顯示順序order
order : number應用：聖杯布局！順序重組，還實現了中間列的等高效果以及頁尾的黏附效果
總結：主要整理了flexbox模型布局功能、屬性術語、語法規範、各版本語法變更和新版本flexbox模型！除此之外，還有更頭疼的是瀏覽器相容性，需要多次練習整理才能好好使用伸縮布局模型來解決布局問題。
lang="en">
charset="utf-8">
title>
body
.flex
.item1
.item2
.item3
.out
style>
head>
class="flex">
class="item1">item1div>
class="item2">item2div>
class="item3">item3div>
div>
class="out">outdiv>
body>
html>
css3彈性盒子（flex布局）
寫在容器上 容器屬性 flex direction 定義內部的排列方向 確定主軸 值 1 row 預設，水平方向，從左到右 2 row reverse 水平方向，從右到左 3 column 顯示為列，垂直方向 從上到下 4 column reverse 顯示為列，垂直方向 從下到上 justify ...
css3彈性盒子 flex布局
1 display flex 說明 設定為彈性盒 父元素新增 2 flex direction 主軸排列方式 說明 順序指定了彈性子元素在父容器中的位置 row 預設在一行內排列 row reverse 反轉橫向排列 右對齊，從後往前排，最後一項排在最前面。column 縱向排列。column re...
CSS3彈性盒子flex布局方式
一 css3彈性盒子 css3 彈性盒子 是一種當頁面需要適應不同的螢幕大小以及裝置型別時確保元素擁有恰當的行為的布局方式。引入彈性盒布局模型的目的 提供一種更加有效的方式來對乙個容器中的子元素進行排列 對齊和分配空白空間。二 css3 彈性盒子內容 彈性盒子由彈性容器 和彈性子元素組成。彈性容器通...