彈性布局可以簡潔、完整、響應式的實現各種頁面布局。
螢幕和瀏覽器視窗大小變化也可以靈活調整布局
指定伸縮元素沿著主軸或者側軸，按照一定比例分配額外的空間，調整伸縮元素的大小
指定伸縮元素沿著主軸或者側軸，把伸縮元素額外空間分配到伸縮元素之前、之後和之間
控制元素在頁面上的布局方向
指定如何將垂直於元素布局軸的額外空間分配到該元素的周邊
按照不同文件物件模型（dom），指定排序方式對螢幕上元素重新排序【瀏覽器渲染中不按照文件流先後順序重排伸縮元素】
使用者沿著乙個伸縮容器的主軸配置伸縮元素，主軸是水平還是垂直的取決於justify-content屬性
只需要在父元素設定為flex布局即可：display:felx或者display:inline-flex。那其子元素的float、clear和vertical-align的屬性就無效，父元素成為flex容器，就預設了父容器裡面只有一行。
html:23
4567
css:
display: flex;
/* 設定主軸的方向 column垂直、flex水平*/
flex-direction: column;
} width: 100px;
height: 100px;
text-align: center;
line-height: 100px;
background: red;
color: #ffffff;
margin: 10px;}屬性
說明flex-direction
決定了彈性容器子元素的排列方式
flex-wrap
設定了彈性容器超出時，是否換行
flex-flow
flex-direction 和 flex-wrap 的簡寫
align-items
設定彈性容器的子元素在縱軸方向的對齊方式
align-content
和align-items,但不設定子元素對齊，只是設定行對齊
justify-content
設定彈性容器子元素在主軸（橫軸）方向上的對齊方式
1、flex-direction：決定主軸的方向，就是子元素的排列方向。在乙個容器內無非就是四種排列方向：
第一種起點在左端的水平方向，則屬性值為row，也是flex-direction屬性的預設值；
第二種就是起點在右端的水平方向，則屬性值為row-reverse；
第三種是起點在上端的垂直方向，則屬性值是column；
第四種是起點在下端的垂直方向，則屬性值是column-reverse。
flex-direction:row || row-reverse || column || column-reversenowrap:不換行
wrap：換行 ，多餘的子元素排在第一行的下方
wrap-reverse：換行，多餘的子元素排在第一行的上方。
flex-wrap:wrap || wrap-reverse || nowrapnowrap 。
第乙個屬性值表示flex-direction屬性值，第二個屬性值表示flex-wrap屬性值。
flex-flow:flex wrap屬性值描述
flex-start
預設值，左對齊
flex-end
右對齊center
居中space-between
兩端對齊
space-around
每個子元素對兩側的間距相等，那麼每兩個子元素的間距是子元素與邊框間距的兩倍。
5、側軸對齊align-items和align-self：定義子元素在側軸上的對齊方式，有五個屬性值：
屬性值描述
flex-start
側軸起點對齊
flex-end
側軸終點對齊
center
側軸中點對齊
baseline
就是子元素的第一行文字基線對齊
stretch
預設值，若是子元素沒有設定高度或者是auto的話，那子元素就沾滿容器的高度
6、align-content（堆疊伸縮行）：定義了多軸對齊方式，若是子元素只有一根軸線的話，align-content屬性就不起作用了，有6個屬性值：
屬性值描述
flex-start
與交叉軸的起點對齊
flex-end
與交叉軸的終點對齊
center
與交叉軸的中點對齊
space-between
與交叉軸兩端對齊，軸線之間的間隔平均分布
space-around
每根軸線兩側的間距相等。
stretch
預設值，軸線佔滿整個交叉軸
伸縮性 flex
伸縮容器按照比例給各個伸縮元素分配額外空間
對齊的不是伸縮元素，而是伸縮行
flex-grow:1;//每乙個伸縮元素平均分配額外空間，如果設定為2，那麼該元素所佔的額外空間是其他元素的2倍flex-shrink:1;//定義元素的收縮能力border: 1px solid red;
} width: 100px;
height: 100px;
text-align: center;
line-height: 100px;
background: red;
color: #ffffff;
margin: 10px;
} flex: 1;
} flex: 2;
} flex: 3;
}order：定義了子元素的排列順序，數值越小，就越是靠前
flex-grow：定義子元素放大的比例，預設值是0
flex-shrink：定義了子元素的縮小比例，預設值是1，就是剩餘空間不足，該子元素就會縮小，若有乙個子元素 flex-shrink屬性設定為0，其他都是1的話，那麼在剩餘空間不足的時候，該子元素不變，其他子元素等比例縮小
flex-basis：定義了子元素在分配剩餘空間的時候，該子元素佔據主軸的空間，預設值auto，就是該子元素本來的空間大小，也可以設定成具體的數值（200px），表示該子元素的固定空間大小。
flex：是flex-grow, flex-shrink 和 flex-basis屬性的簡寫，預設值是：0 1 auto。若是設定為auto，則表示為 1 1 auto；設定為none,則表示為 0 0 auto
align-self：定義了該元素與其他元素的不一樣的對齊方式，覆蓋了align-items屬性，預設值auto，表示繼承父元素的align-items的屬性值，若沒有父元素，則是等同於stretch。flex-start | flex-end | center | baseline | stretch都與align-items屬性完全一致。
flex彈性布局基礎
阮一峰的flex布局 flexible box 彈性布局，用來為盒狀模型提供最大的靈活性。採用flex布局的元素成為flex容器，它的所有子元素稱為專案。容器預設兩根軸 水平軸和垂直的交叉軸。整個盒子寬度550px，1,2,3子盒子預設寬高都為100px，然後設定盒子1,2,3的flex grow屬...
flex彈性布局0基礎理解 屬性解讀
阮一峰前輩文件參考 概念 一般使用盒模型來布局頁面，但是很麻煩。於是就有了flex，目前所有主流瀏覽器上都可以放心使用。個人的理解為，flex為css的某些用來支援layout頁面布局的屬性。使用起來非常方便。因為減少了盒模型的繁瑣，相當於頁面布局的替代用法。所以！父元素設定flex布局後，子元素的...
Flex布局 彈性布局 基礎入門
flex是flexble box的縮寫，意為 彈性布局 用來為盒狀模型提供最大的靈活性，任何乙個容器都可以指定為flex布局。採用 flex 布局的元素，稱為 flex 容器 flex container 簡稱 容器 他所有子元素自動成為容器成員，簡稱為 flex 專案 flex item 簡稱 專...