1、 要使用伸縮部局先要給
父元素設定為伸縮盒子
display:flex;伸縮盒子還有測軸（側軸始終垂直於主軸）
伸縮盒子中所有的子元素都按照主軸的方向顯示
3、 設定主軸方向 (預設值row)
flex-direction:row; 從左向右
flex-direction:row-reverse; 從右向左
flex-direction:column; 從上向下
flex-direction:column-reverse; 從下向上
justify-content:flex-start; 在主軸的開始位置對齊
justify-content:flex-end; 在主軸的末尾對齊
justify-content:center; 在主軸的中間位置對齊
justify-content:space-around; 環繞顯示
justify-content:space-between; 佔滿正行（左右兩邊對齊中間在中間顯示）
align-items:flex-start;
align-items:flex-end;
align-items:center;
align-items:stretch; 拉伸
flex-wrap:nowrap;不換行
flex-wrap:wrap; 換行
注意：該屬性必須配合flex-wrap:wrap;使用
align-content:flex-start; 開始位置換行沒有空格
align-content:flex-end; 結束位置對齊
align-content:center; 中間對齊
align-content:space-between; 一行在開始位置一行在結束位置
align-content:space-around; 環繞對齊
align-content:stretch; 拉伸
子元素屬性 order
order值越大誰就越靠後
flex;子元素屬性：設定子元素的縮放比；
自適應盒子設定為flex：1；
把父元素整體減去固定盒子的寬度後剩下的部
分整體為乙份；
前端布局之Flex布局
傳統布局方式基於盒模型，依賴display屬性 position屬性 float屬性。由於傳統布局一些操作複雜，2009年w3c提出了flex布局，可以簡便 響應式的實現各種布局，並且能夠相容所有瀏覽器。區別於傳統布局的 盒子 在flex布局中稱為 flex容器 flex container 其所有...
前端基礎 flex布局
父元素設為 flex 布局以後，子元素的float clear和vertical align屬性將失效。採用flex布局的元素，稱為 容器 所有子元素稱為 專案 容器預設存在兩根軸 水平的主軸 main axis 和垂直的交叉軸 cross axis 主軸的開始位置 與邊框的交叉點 叫做main s...
前端頁面flex布局
布局方式 可伸縮給父級元素新增display flex，再給子元素新增flex 1 不加單位，表示該子元素佔1份 一般 配合min width和max width使用，如果不指定flex就不參與伸縮，可固定導航欄，讓兩邊伸縮 追加屬性flex direction column可以是子元素垂直排列 對...