徹底搞懂flex彈性盒模型布局

為什么要用flex

基于css3簡單方便，更優雅的實現，瀏覽器兼容性好，傳統的css實現一個div居中布局要寫一堆代碼，而現在幾行代碼就搞定了，沒有理由不用flex。

兼容性：

Base Browsers: IE8.0+, Firefox40.0+, Chrome40.0+, iOS8.0+, Android4.4+, Opera40.0+

flex屬性的分類

我們先來概覽一下flex的所有屬性，屬性看似多雜，其實分為兩大類：

flex container

• flex-flow （復合屬性，包含以下兩個）
  • flex-direction （方向x軸，y軸）
  • flex-wrap （是否換行）
• align-content （y軸對齊方式）
• justify-content （x軸對齊方式）
• align-items （flex子項在flex容器的當前行的側軸（縱軸）方向上的對齊方式。）

flex items

• flex （復合屬性，包含以下三個）
  • flex-grow （擴展比率）
  • flex-shrink （收縮比率）
  • flex-basis （伸縮基準值）
• align-self （flex子項單獨在y軸對齊方式）
• order （排序）

看不懂這一堆屬性也沒關系，來感受一下實例

實踐

理解flex的核心就是區分好flex container和flex items，我們就做一個簡單的實例：

總結

flex布局很靈活，可以多種搭配，理解了flex container和flex items也就理解了flex彈性盒模型布局