為什麼需要彈性布局：
傳統 display: float
position屬性,
它對於那些特殊布局非常不方便，比如，垂直居中就不容易實現。
flex 彈性布局誕生：
1.flex-direction，指定主軸是哪一根(row、column) 主軸方向(row-reverse,column-reverse)
2. justify-content屬性 /* 主軸對齊方式 */
/* flex-start: 左對齊 flex-start 右對齊 center: 居中對齊 space-between: 左右對齊 */
3. flex-wrap: wrap;
/* 如果當水平填充滿了以後是否換行 **/
4. align-items: center; /* 測軸對齊方式 */
5. flex-grow: 1; 權重
案例demo使用：
12
前端彈性布局總結
如何開啟彈性布局 開啟彈性布局的標籤即為 容器 box 容器具有是屬性flex direction 決定主軸的方向 flex wrap 容器排布在一條線 軸線 上，當排布滿的是否換行 flex flow 是flex direction屬性和flex wrap屬性的簡寫形式，預設值為row nowra...
前端布局（流式布局 響應式布局 彈性布局等）
自適應布局的特點是分別為不同的螢幕解析度定義布局，即建立多個靜態布局，每個靜態布局對應乙個螢幕解析度範圍。改變螢幕解析度可以切換不同的靜態區域性 頁面元素位置發生改變 但在每個靜態布局中，頁面元素不隨視窗大小的調整發生變化。可以把自適應布局看作是靜態布局的乙個系列。1 布局特點 螢幕解析度變化時，頁...
彈性布局使用方式
彈性布局使用方式 相容性 適合使用手機端 pc 直接方式 原因專案需要相容所有瀏覽器 ie10 以上可以考慮 使用規則 1 找到父容器 給父容器設定display flex 2 一旦容器變為flex布局 主軸與交叉軸就會存在 你用不用或者都在那裡 3 確定主軸方向 flex direction 預設...