1.基本概念
1）flex模型 當頁面需要適應不同螢幕尺寸以及裝置型別時該模型可以確保元素在恰當的位置
2）容器和專案 用於包含內容的元件是容器，容器內部元件是專案。容器允許包含巢狀。
3）座標軸 預設水平布局，水平從左向右是主軸，垂直從上到下是交叉軸。可用flex-direction:column互換兩軸位置
4）flex屬性
2.容器屬性
1）flex-direction 設定主軸方向，規定專案的排列方向
2）flex-wrap 規定是否允許專案換行以及多行排列時換行方向
3）justify-content 設定專案在主軸方向上的對齊方式以及分配專案之間及其周圍多餘的空間
4）align-items 設定專案在行中的對齊方式
5）align-content 用於多行排列時設定專案在交叉軸方向上的對齊方式，以及分配專案之間及其周圍多餘的空間
3.專案屬性
1）order 設定專案沿主軸方向上的排列順序，數值越小，排列越靠前。屬性值為整數
2）flex-shrink 設定專案收縮因子。專案溢位時，通過規定比例壓縮專案適應容器。是非負數。
flex-shrink屬性總和小於1時溢位長度：
3）flex-grow 設定專案擴張因子。非負數。
當flex-grow屬性值總和小於1時擴張單位就是全部剩餘空間
4）flex-basis 根據主軸方向代替專案寬/高，優先順序高於width/height
ps：數值比auto優先順序更高
5）flex 是flex-grow、flex-shrink、flex-basis的簡寫方式
6）align-self 設定專案在行中交叉軸上對齊方式，覆蓋容器的align-items，可對專案的對齊方式做特殊處理
小程式之flex
display flex容器的屬性 flex direction flex wrap flex flow justify content align items align content flex direction屬性決定主軸的方向 即專案的排列方向 box flex direction屬性 r...
微信小程式之flex布局
flex布局 flex布局的特點 設有display flex或者display block的元素就是乙個flex container 伸縮容器 裡面的子元素稱為flex item 伸縮專案 flex container中子元素都是使用flex布局排版。display flex 指定為行內容器模式，...
微信小程式之flex布局
flex布局在做前端的時候十分的方便快捷，這裡學習了一下分享給大家 flex flexible box 彈性布局盒模型 是2009年w3c提出的一種可以簡潔 快速彈性布局的屬性。主要思想是給予容器控制內部元素高度和寬度的能力。目前已得到以下瀏覽器支援 簡單解釋一下概念圖，就是說flex支援橫向布局和...