Flex佈局 流式佈局 伸縮佈局透徹分析

• 傳統的佈局概念

  基於盒子容器，依賴 display 、position 、float三個屬性，相互制約

• Flex佈局概念

  1.Flex佈局簡稱 “彈性佈局” 或 “流式佈局” 或 “”伸縮佈局”，各有千秋。
  2.是一種當頁面需要適應不同的屏幕大小以及設備類型時確保元素擁有恰當的行爲的佈局方式。
  3.Flex提供一種更加有效的方式來對一個容器中的子元素進行排列、對齊和分配空白空間。
  4.缺點：兼容性問題，瀏覽器版本過低（比如IE9以下的不支持）。
  
  
  

• Flex實戰演練

  先明確一下概念的東西：容器簡稱伸縮容器，容器裏面的東西簡稱伸縮項，如圖
  
  

  1. 排列方式（針對容器操作，作用於伸縮項）

  大容器加樣式：display:flex; flex- direction:row;
  *說明：
  //display:flex 將容器變爲伸縮容器。
  // flex- direction:row;(以一行排列，從左至右），反方向爲flex- direction:row-reverse；
  // flex- direction:column;(以一列排列，從上至下），反方向爲flex- direction:column-reverse；
  
  
  
  

  2. 主軸對齊方式（針對容器操作，作用於伸縮項）

  大容器加樣式：display:flex; flex- direction:row;justify-content:flex-start;
  *說明：
  1.justify-content:flex-start; 把所有伸縮項沿主軸的起點方向對齊,效果如下圖
  
  2.justify-content:flex-end; 把所有伸縮項沿主軸的終點方向對齊,效果如下圖
  
  3.justify-content:center; 把所有伸縮項沿主軸的居中對齊,效果如下圖
  
  4.justify-content:space-between;把所有伸縮項居中左右間隔平分（兩端對齊）,效果如下圖
  
  5.justify-content:space-around;把每個伸縮項左右都加一定的邊距,效果如下圖
  
  
  
  
  
  
  
  
  
  
  
  

  3. 側軸對齊方式（針對容器操作，作用於伸縮項）

  大容器加樣式：display:flex; flex- direction:row;justify-content:flex-start;align-items:flex-start;
  1.align-items:flex-start; 把所有伸縮項沿側軸的起點方向對齊,效果如下圖,
  
  2.align-items:flex-end; 把所有伸縮項沿側軸的終點方向對齊,
  3.align-items:baseinline; 把所有伸縮項沿文字內容基線對齊,效果如下圖
  
  4.align-items:stretch; 把所有伸縮項拉伸對齊,效果如下圖
  
  
  
  
  
  
  
  

  4. 側軸個別對齊方式（針對伸縮項操作，作用於伸縮項）

  伸縮項加樣式：align-items:flex-start;*
  *說明：
  align-self的取值和align-items一樣
  align-self:flex-end; 把第一個伸縮項沿側軸底部對齊，如下圖
  align-self:flex-start; 把伸縮項沿側軸頂部對齊
  align-self:center; 把伸縮項沿側軸居中對齊
  
  
  
  
  

  5. 換行與換行對齊（針對伸縮容器操作，作用於伸縮項），注意：換行對齊必須基於伸縮項換行

  例如：當容器的寬度爲600px 容器內有3個300px的伸縮項
  大容器加樣式：**display:flex; **
  *說明：
  A.flex-wrap:nowrap; 默認是不換行；
  B.flex-wrap:wrap; 換行； 如圖
  
  C. align-content: flex-strat; 用於換行之後與側軸起點對齊； 如圖
  
  D. align-content: flex-end; 用於換行之後與側軸終點對齊 ； 如圖
  
  
  
  
  
  
  
  
  
  

  E. align-content: center; 用於換行之後與側軸居中對齊； 如圖
  
  

  F. align-content: space-between; 用於換行之後與側軸上兩端對齊 ； 如圖
  
  

  G. align-content: space-around; 用於換行之後與側軸環繞對齊； 如圖
  
  

  H. align-content:stretch; 用於換行之後與側軸上拉伸對齊； 如圖
  
  

  I. flex-wrap:wrap-reverse; 反轉換行； 如圖
  
  

  6. 伸縮項排序（針對伸縮項操作，作用於伸縮項）

  order:0; 默認排序（數值越小，顯示在前面，數值越大 越靠後）
  
  

  7. 伸縮項擴充（針對伸縮項操作，作用於伸縮項）

  場景：當伸縮項寬度之和小於容器的寬度時，希望伸縮項按比例自動填充，若伸縮項寬度總和不小於容器的寬度時，設置的flex-grow無效
  flex-grow:0;默認0，不進行擴充 值越大，所佔的比例越大
  
  補充說明：
  
  
  
  
  

  8. 伸縮項縮小（針對伸縮項操作，作用於伸縮項）

  注意：flex-shrink:1；默認值爲1 值越大，所佔的比例越小
  
  
  
  

  9. 伸縮項寬度設置（針對伸縮項操作，作用於伸縮項）

  flex-basis:100px; 伸縮項寬度設置
  
  

  10. 伸縮項屬性連寫（針對伸縮項操作，作用於伸縮項）

  flex: 0 1 auto； 分別代表：擴充 縮小 寬度