# flex 布局概述 ## 1. flex 是什么 - flex 是 Flexible Box 的縮寫,意為**彈性布局** - flex 2009 年就已出現,瀏覽器兼容性很好,請放心使用 --- ## 2. flex 解決了什么問題 - 塊元素的垂直居中, flex 可以輕松解決 - 元素大小在容器中的自動伸縮,以適應容器的變化,特別適合移動端布局 --- ## 3. flex 項目的布局方向是什么 - 一個物體在一個平面中, 要么水平排列, 要么垂直排列, flex 借鑒了這個思想 - flex 是一維布局, 項目任何時候只能沿一個方向排列,要么水平, 要么垂直 - flex 項目排列的方向, 稱為**主軸**, 水平和垂直二種 - 與主軸垂直的稱為**交叉軸**(有的教程也稱之為*副軸/側軸*) --- ## 4. flex 布局中常用術語有哪些 | 序號 | 簡記 | 術語 | | ---- | ------ | --------------------------------------- | | 1 | 二成員 | 容器和項目(`container / item`) | | 2 | 二根軸 | 主軸與交叉軸(`main-axis / cross-axis`) | | 3 | 二根線 | 起始線與結束線(`flex-start / flex-end`) |  --- ## 5.flex 容器屬性有哪些 | 序號 | 屬性 | 描述 | | ---- | ----------------- | ------------------------------------------------------------- | | 1 | `flex-direction` | 設置容器中的主軸方向: 行/水平方向, 列/垂直方向 | | 2 | `flex-wrap` | 是否允許創建多行容器,即 flex 項目一行排列不下時, 是否允許換行 | | 3 | `flex-flow` | 簡化 `flex-direction, flex-wrap` 屬性 | | 4 | `justify-content` | 設置 flex 項目在主軸上對齊方式 | | 5 | `align-items` | 設置 flex 項目在交叉軸上對齊方式 | | 6 | `align-content` | 多行容器中,項目在交叉軸上的對齊方式 | --- ## 6. flex 項目屬性有哪些 | 序號 | 屬性 | 描述 | | ---- | ------------- | ------------------------------------------------------------------ | | 1 | `flex-basis` | 項目寬度: 項目分配主軸剩余空間之前, 項目所占據的主軸空間寬度 | | 2 | `flex-grow` | 項目的寬度擴展: 將主軸上的剩余空間按比例分配給指定項目 | | 3 | `flex-shrink` | 項目的寬度收縮: 將項目上多出空間按比例在項目間進行縮減 | | 4 | `flex` | 是上面三個屬性的簡化縮寫: `flex: flex-grow flex-shrink flex-basis` | | 5 | `align-self` | 單獨自定義某個項目在交叉軸上的對齊方式 | | 6 | `order` | 自定義項目在主軸上的排列順序,默認為 0,書寫順序,值越小位置越靠前 |