一、什么是彈性布局
彈性布局(flex container)，頁面中任何一個元素只要設置了display:flex屬性，那么當前盒子都稱為彈性盒子。彈性盒子默認有兩條軸: 默認水平顯示的主軸 和 始終要垂直于主軸的側軸(也叫交叉軸)，在彈性盒子中所有的子元素都是沿著主軸方向顯示。
與傳統布局的區別
傳統布局，基于盒模型，依賴 display屬性 、position屬性 、float屬性，它對于那些特殊布局非常不方便。
傳統布局
兼容性好
布局繁瑣
局限性，不能在移動端很好的布局
flex布局
操作方便，布局及其簡單,移動端使用比較廣泛
pc端瀏覽器支持情況比較差
IE11或更低版本不支持flex或僅支持部分
建議
如果是pc端頁面布局，采用傳統方式
如果是移動端或是不考慮兼容的oc則采用flex
二、容器和項目
1、容器
采用flex布局的元素，成為flex布局
只要將一個元素的display的值設置為flex或者inline-flex，此元素就變成flex容器
2、項目
flex容器中的所有子元素都自動成為容器成員，稱為flex項目
flex容器中的所有flex元素都會有下列行為：
元素排列一行（flex-direction屬性的初始值是row）
元素從主軸的起始線開始。
元素不會再主維度方向拉伸，但是可以縮小
flex-basis屬性為auto
flex-wrap屬性為norap(不換行)
3、主軸和交叉軸
當使用flex布局時，首先想到的是兩根軸線——主軸和叫交叉軸
主軸由flex-direction定義，另一根軸垂直于它。也就是說主軸和交叉軸不是固定的，而是可以自己定義的。
默認情況下，水平方向是主軸，垂直方向是交叉軸，單可以通過flex-direction屬性更改
元素成為容器后，元素的子元素默認成為容器的項目，但項目中的子元素不會，除非設置項目也成為容器
項目被設置容器后，也擁有主軸和交叉軸
**注意：**當為父元素設置flex布局后，子元素的float、clear和vertical-align屬性將失效。
4、兩種容器
容器可以設置為兩個值flex，inline-flex
區別
flex：容器成為塊元素
inline-flex：容器成為行內塊元素，不會占滿全屏
三、容器屬性
屬性 說明
flex-direction 設置主軸方向
justify-content 項目再主軸上的排列方式
flex-wrap 項目是否換行
align-items 項目在交叉軸的排列方式（單行）
align-content 項目在交叉軸的排列方式（多行）
flex-flow 復合屬性，相當于同時設置了 flex-direction 和 flex-wrap
來APICloud移動應用開發平臺學習更多APP開發知識：app開發，app制作，app開發源碼下載，app開發框架，app制作模板等免費獲取。
APICloud-專業APP開發、app定制服務商，提供一站式移動應用解決方案，滿足您的各類需求，歡迎免費評估需求和獲取報價。
立即免費在線制作一個APP，新手注冊即送開發大禮包
提交app定制需求，免費獲取報價和周期：
電腦請點擊https://app.apicloud.com/index?uzchannel=500
手機請點擊http://www.cvrender.com/m/customizedservice