# Flex 項目屬性 巧合的是, 在 Flex 項目也有 6 個可用的屬性,他們分別是: | 序號 | 屬性 | 描述 | | ---- | ----------- | ------------------------------------------------------------------------- | | 1 | order | 定義項目排列順序,索引越小超靠前,默認為 0 | | 2 | flex-grow | 定義項目的放大比例,默認為 0 表示不放大, 即就算存在剩余空間也不放大 | | 3 | flex-shrink | 定義了項目的縮小比例,默認為 1,即如何空間不足,則自動縮小項目來填充 | | 4 | flex-basis | 定義了項目占據的主軸空間,默認值為 auto, 即項目原始大小 | | 5 | flex | 是 flex-grow,flex-shrink,flex-basis 簡寫,默認值: 0 1 auto, 后二個屬性可選 | | 6 | align-self | 個性化定定制某單個項目的對齊方式,可覆蓋容器`align-items`屬性,默認 auto | --- ## 1. order - 定義項目的排列順序。數值越小，排列越靠前，默認為 0 - CSS 語法: ```css .item { order: integer; } ``` - 示意圖:  --- ## 2. flex-grow - 設置項目的放大比例, 默認為 0: 不放大,哪怕軸上有剩余空間 - CSS 語法: ```css .item { flex-grow: number; /* default: 0 */ } ``` - 空間分配方案小案例: - `flex-grow: 1`: 每個項目等分, 都占全部的空間的 N 分之一(N: 項目數量) - `flex-grow: 2`如果某個項目為 2, 其它項目為 1, 則它占據空間比其它項目多一倍  - flex 從剩余空間中分配項目所占的份數 - 前提是項目不要設置固定寬度, 由盒子在剩余空間中自動分配 - 每個盒子所在比例可以各不相同, 屬性值必須是數值,整數小數都可以 - 如果盒子中存在有寬度的項目, 那么剩余空間應該減去它們 ## 3. flex-shrink - 設置了項目的縮小比例,默認為 1, 即空間不足時, 自動縮小填充 - CSS 語法: ```css .item { flex-shrink: number; /*defautl: 1*/ } ``` - 縮放規則 - `flex-shrink: 1`: 所有項目都為 1, 空間不足時, 自動等比例縮小填充主軸剩余空間 - `flex-shrink`: 如果有一個項目為 0, 其它項目為 1, 則空間不足時, 它并不隨其它項目縮小 - 注意: 該屬性不支持負值, 即`flex-shrink: -1` 無效  --- ## 4. flex-basis - 定義了在計算分配主軸上剩余空間之前, 項目占據的主軸空間(main size) - 瀏覽器根據該屬性,可以計算出主軸上是否還有剩余空間, 決定是否換行 - 默認值為`auto`, 即項目原來占據的空間大小 - CSS 語法: ```css .item { flex-basis: length | auto; /* default auto */ } ``` 你可以設置與`height`或者`width`屬性一樣的絕對值,例如`500px`,則該項目占據固定的空間大小 ```css .item { flex-basis: 500px; } ``` --- ## 5. flex - flex 屬性是前面`flex-grow`,`flex-shrink`和`flex-basis`屬性的簡寫 - 默認值: `0 1 auto`, 除第一個外, 其它二個可選 - CSS 語法: ```css .item { flex: none | [ < "flex-grow" > < "flex-shrink" >? || < "flex-basis" > ]; } ``` - 由于該屬性極其常用, 為了簡化, Flex 布局還為該屬性設置了快捷值 - `flex: auto`: 等價于`flex: 1 1 auto` - `flex: none`: 等價于`flex: 0 0 auto` - 推薦優先使用 flex 屬性, 由瀏覽器自動計算出其它屬性的值 --- ## 6. align-self - 該屬性允許單個項目有與其它項目不一樣的對齊方式, 可覆蓋掉容器的`flex-items`屬性 - 默認值: `auto`,表示繼承父元素的`align-items`,如果沒有父元素,則等價于`stretch` - CSS 語法: ```css .item { align-self: auto | flex-start | flex-end | center | baseline | stretch; } ``` - 示意圖: