採用flex布局的元素，稱為flex容器（flex container），簡稱」容器」。它的所有子元素自動成為容器成員，稱為flex專案（flex item），簡稱」專案」任何乙個元素都可以指定為flex布局
display:flex | inline-flex 定義彈性伸縮盒容器型別
flex 將物件作為塊級彈性彈性盒模型。
inline-flex 將物件作為內聯塊級彈性彈性盒模型。
注意，設為flex布局以後，子元素的float、clear和vertical-align屬性將失效。
容器的屬性
flex-direction 排列盒子方向row(預設)： 橫向從左到右排列（橫向 ）。
row-reverse： 對齊方式與row相反。 （倒序排列）
column： 縱向從上往下排列（縱向）。
column-reverse：對齊方式與column相反。 （倒序排列）
flex-wrap 換行方式flex-wrap：nowrap | wrap | wrap-reverse 控制flex容器是單行或者多行，同時橫軸的方向決定了新行堆疊的方向
nowrap（預設）： flex容器為單行，不換行
wrap： flex容器為多行。超出換行
wrap-reverse：反轉 wrap 排列
flex-****flow集合屬性，同時定義flex-direction和flex-wrap
justify-content在主軸方向上的專案對齊方式
flex-start(預設) 主軸起點對齊
flex-end 主軸終點對齊
center 主軸居中
space-between 主軸兩端對齊,專案之間間隔相等
space-around 主軸每個專案兩側間隔相等，專案之間的間隔比專案到邊框的間隔大一倍
align-items 專案在交叉軸上的對齊方式flex-start 交叉軸起點對齊
flex-end 交叉軸終點對齊
center 交叉軸居中
space-between 交叉軸兩端對齊,專案之間間隔相等
space-around 交叉軸每個專案兩側間隔相等，專案之間的間隔比專案到邊框的間隔大一倍
stretch （預設）軸線佔滿整個交叉軸
align-content如果容器的交叉軸方向有富餘空間，設定每行應該如何垂直對齊**。**(一般不用)
flex-start flex-end center space-between space-around stretch (預設) space-evenly
專案的屬性
order屬性定義專案的排列順序。數值越小，排列越靠前，預設為0flex-grow屬性定義專案的放大比例，預設為0，即如果存在剩餘空間，也不放大。
flex-shrink屬性定義了專案的縮小比例，預設為1，即如果空間不足，該專案將縮小
flex-basis屬性定義了在分配多餘空間之前，專案佔據的主軸空間（main size）。瀏覽器根據這個屬性，計算主軸是否有多餘空間。它的預設值為auto，即專案的本來大小。
flex是flex-grow,flex-shrink和flex-basis的簡寫，預設值為0 1 auto。後兩個屬性可選
flex-self允許單個專案有與其他專案不一樣的對齊方式，可覆蓋align-items屬性。預設值為auto，表示繼承父元素的align-items屬性，如果沒有父元素，則等同於stretch
.item
該屬性可能取6個值，除了auto，其他都與align-items屬性完全一致。
實戰開發
1、在進行熱貓**頁面開發時我們應該將頁面的布局根據ui先進行乙個大體的規劃 這樣較直接開發會有乙個效率的提公升。比如上方ui中的藍色頭部區域可以劃分為上中下三塊 其中下方的這一塊可以在劃分為左中右三塊 這樣可以使得結構變得清晰明了
2、在進行帶有九宮格或者結構清晰明了的頁面開發時推薦使用flex彈性盒子布局開發 好處：不必使用float定義浮動 不會隨著頁面寬高的變化打亂排版 不必定義過多屬性只使用flex布局就可以完成頁面的開發
3、對上方ui中的九宮格使用flex布局
.box
(flex容器 白色區域)
.box .item
(專案 白色區域內九宮格的每一項)
.box .item .img
（專案中的）
小程式的Flex彈性布局
1.flex容器屬性 flex flow 是flex direction和flex warp的簡寫 2.內部元素屬性 flex 是flex grow flex shrink flex basis的簡寫 伸縮容器 flex container 設有display flex或者display block...
微信小程式 flex彈性布局案例
使用flex彈性布局 有滾動條 頁面結構 wxml 個性推薦 歌單主播電台 排行榜私人fm 每日歌曲推薦 雲 新歌榜 推薦歌單 一生中最愛的人是誰？一生中最愛的人 一生中最愛的人 一生中最愛的人 一生中最愛的人是誰？一生中最愛的人 一生中最愛 譚詠麟 wxss index.wxss page con...
CSS中的flex（彈性布局）
父標籤 display flex flex direction row row reverse 橫向 起點方向 rolumn rolumn reverse 縱向 flex wrap nowrap wrap wrap reverse 換 況 flex flow direction 與 wrap 結合 ...