彈性盒模型 彈性盒子是css3的一種新佈局模式，由容器（父元素）和項目（子元素）組成。 彈性盒子是一種當頁面需要適應不同的屏幕大小以及設備類型時確保元素擁有恰當的行為的佈局方式。 引入彈性盒模型的目的：提供一種更加有效的方式來對一個容器中的子元素進行排列、對齊和分配空白區間。 設置彈性盒子：disp ...
彈性盒模型
彈性盒子是css3的一種新佈局模式，由容器（父元素）和項目（子元素）組成。
彈性盒子是一種當頁面需要適應不同的屏幕大小以及設備類型時確保元素擁有恰當的行為的佈局方式。
引入彈性盒模型的目的：提供一種更加有效的方式來對一個容器中的子元素進行排列、對齊和分配空白區間。
設置彈性盒子：display:flex或inline-flex; 區別：flex獨占一行；inline-flex占據自己應該占據的位置，有點像inline-block，不支持margin:auto。
容器屬性
1.flex-direction 確定主軸和方向
- row 預設，從左到右
- row-reverse 從右到左
- column 從上到下
- column-reverse 從下到上
2.flex-wrap 規定項目是否換行
- nowrap 預設，不換行
- wrap 換行，交叉軸從上到下
- wrap-reverse 換行，第一行在下，交叉軸從下到上
3.flex-flow 複合屬性，flex-direction和flex-wrap組成的複合屬性
- row nowrap 預設，從左到右不換行
4.justify-content 項目在主軸上的對齊方式
- flex-start 預設，主軸起點對齊
- flex-end 主軸終點對齊
- center 主軸居中對齊
- space-between 主軸上項目兩端對齊，項目之間間隙平分空白
- space-around 主軸上的項目兩側間隔相等
5.align-content 多行項目在交叉抽（與主軸垂直）上的對齊方式，不要和align-items共存
- stretch 預設，不設置項目高度的時候，占滿平分整個交叉軸
- flex-start 交叉軸起點對齊
- flex-end 交叉軸終點對齊
- center 交叉軸居中對齊
- space-between 交叉軸上項目兩端對齊，項目之間間隙平分空白
- space-around 交叉軸上項目兩側間隔相等
6.align-items 單行項目在交叉軸上的對齊方式
- stretch 預設，不設置高度（豎直時）或寬度(水平時)占滿整個交叉軸
- flex-start 交叉軸的起點對齊
- flex-end 交叉軸的終點對齊
- center 交叉軸的中間對齊
- baseline 文字基線對齊
項目屬性
1.flex-grow 設置項目的擴大比例
- 0 預設，不擴大
- 1 項目擴大填滿容器，值為1時占一份，值為2時占兩份，不支持負值
2.flex-shrink 設置項目的收縮比例
- 1 預設，當容器寬度不夠時，項目等比例縮小
- 0 不縮小
- 2,3...n 值越大縮小得越多
3.flex-basis 設置項目初始長度
- auto 預設，項目沒有設置寬度的時候，預設內容撐開寬度
- 0 不設置初始值
- number 規定項目的初始長度
4.flex 複合寫法flex:flex-grow flex-shrink flex-basis
- auto 相當於1 1 auto
- none 相當於0 0 auto
- 1 相當於1 1 0
- initial 相當於0 1 auto
5.align-self 單獨控制交叉軸一個項目的對齊方式
- auto 預設值，繼承父容器的align-items
- 其他屬性值與align-items一樣
6.order 規定項目在主軸上的排列順序
- 0 預設，根據項目先後排列
- 整數，可為負值，數值越小排名越靠前
以上為個人理解，如有不當之處請指正！
