彈性盒模型

彈性盒模型

1. 容器的概念

指定父元素爲 flex

.parent { display: flex; }
.parent_inline { display: inline-flex; }

指定以後 float clear vertical-align 會失效

父元素稱爲 flex container 子元素稱爲 flex item

容器默認包含 main axis 和 cross axis，
main start main end 爲主軸的起始位置和結束位置
cross start cross end 爲交叉軸的起始位置和結束位置

flex item沿主軸排列，main size cross size 爲所佔據的主軸和交叉軸的空間

2. container的屬性

flex-direction flex-wrap flex-flow justify-content align-items align-content 爲定義在容器上的屬性

• flex-direction 主軸的方向

  row            主軸爲水平方向，起點在左端 （默認值）
    row-reverse    主軸爲水平方向，起點在右端
    column         主軸爲垂直方向，起點在上沿
    column-reverse 主軸爲垂直方向，起點在下沿

• flex-wrap item的換行方向

  nowrap        不換行 （默認）
    wrap          換行，第一行在上方
    wrap-reverse  換行，第一行在下方

• flex-flow direction、item的簡寫

• justify-content 定義item在主軸上的對齊方式

  flex-start    左對齊（默認值）
  flex-end      右對齊
  center        居中
  space-between 兩端對齊，項目之間的間隔都相等
  space-around  兩端對齊, 每一個項目兩側的間隔相等

• align-items 定義item在交叉軸上的對齊方式

  flex-start 交叉軸的起點對齊
  flex-end   交叉軸的終點對齊
  center     交叉軸的中點對齊
  baseline   項目的第一行文字的基線對齊
  stretch    若是item未設置高度或設爲auto，將佔滿整個容器的高度 （默認值）

• align-content 多根軸線的對齊方式， 單軸無效

  flex-start    與交叉軸的起點對齊
  flex-end      與交叉軸的終點對齊
  center        與交叉軸的中點對齊
  stretch       軸線佔滿整個交叉軸。（默認值）
  space-between 與交叉軸兩端對齊，軸線之間的間隔平均分佈
  space-around  每根軸線兩側的間隔都相等,因此，軸線之間的間隔比軸線與邊框的間隔大一倍

3. item的屬性

order flex-grow flex-shrink flex-basis flex align-self 屬性定義在 item 上

• order item的排列順序

  數值越小，排列越靠前，默認爲0

• flex-grow item的放大比例

  默認0，即若是存在剩餘空間，也不放大
    若是全部項目的flex-grow屬性都爲1，則它們將等分剩餘空間（若是有的話）
    若是一個項目的flex-grow屬性爲2，其餘項目都爲1，則前者佔據的剩餘空間將比其餘項多一倍

• flex-shrink item的縮放比例

  默認爲1，即若是空間不足，該項目將縮小
    若是全部項目的flex-shrink屬性都爲1，當空間不足時，都將等比例縮小。
    若是一個項目的flex-shrink屬性爲0，其餘項目都爲1，則空間不足時，前者不縮小。

• flex-basis 在分配多餘空間以前，item佔據的主軸空間

  默認auto，即項目的原本大小
    設爲跟width或height屬性同樣的值（好比350px），則項目將佔據固定空間

• flex

  flex-grow, flex-shrink 和 flex-basis 的簡寫
    默認 0 (1 auto)
    auto 1 1 auto
    none 0 0 auto

• align-self item 的對齊方式

  容許單個項目有與其餘項目不同的對齊方式，可覆蓋align-items屬性
    默認 auto, 表示繼承父元素的 align-items屬性,
    如沒有父元素則爲 stretch
    .item {
      align-self: auto | flex-start | flex-end | center | baseline | stretch;
    }
    該屬性可能取6個值，除了auto，其餘都與align-items屬性徹底一致