flex佈局基礎知識文檔

flex佈局基礎知識文檔

基礎知識

• 概念 ： 一個有效的佈局方式，即便不知道視窗的大小或者元素未知的狀況下智能的，靈活的調整和分配元素和空間二者之間的關係

• 特性

  • 默認水平對齊
  • 默認不換行
  • 默認使全部子元素佔滿一行，並自動調整子元素的大小(改變默認寬度)

• 包含概念：

  • flex佈局容器(display爲flex的父元素)
  • flex項目(flex佈局容器中的子元素)
  • flexbox格式化上下文
  • 主軸: Main-Axis軸
  • 側軸: Cross-Axis軸
• 包含種類： flex inline-flex

• flex 容器屬性： flex-direction || flex-wrap || flex-flow || justify-content || align-items || align-content

  • 對齊屬性

    > `flex-direction` : row(主軸默認值) || column(側軸) || row-reverse(主軸翻轉) || column-reverse(側軸翻轉)

    • 換行屬性

      flex-wrap : wrap(換行) || nowrap(不換行默認值) || wrap-reverse(反向換行)

    • 縮寫

      flex-flow: row wrap;

    • 主軸佈局屬性

      justify-content: flex-start(左對齊默認值) || flex-end(右對齊) || center(居中對齊) || space-between(兩端對齊:平均分配中間距離) || space-around(讓每一個flex項目具備相同的空間)

    • 側軸佈局屬性

      align-item: flex-start(上對齊) || flex-end(下對齊) || center(居中) || stretch(拉伸默認值: 佔滿整個高度) || baseline(基線對齊)

    • 多行佈局屬性

      align-content: flex-start(多行上對齊) || flex-end(多行下對齊) || center(多行居中) || stretch(拉伸默認值: 多行佔滿整個高度)

• flex項目屬性: order || flex-grow || flex-shrink || flex-basis

  • order : 容許flex項目在flex容器中從新排序。

    > 默認值爲 0
    > 能夠接受正值以及負值
    > flex項目根據 `order` 從新排序
    > 面對相同的值，由html文檔順序決定(與float相同)

  • flex-grow 與 flex-shrink: 容許設置flex項目在容器有多餘的空間的時候如何放大，沒有空間的時候如何縮小

    > 可接受 0 或者任意大於 0 的正數
    > `flex-grow`: 默認值爲 0 `flex-shrink`: 默認值爲 1
    > 0 和 正數 分別表示填充的關和開
    > `flex-grow`: 主軸  `flex-shrink`: 側軸

  • flex-basis: 指定項目的 初始計算 大小

    > 默認值 auto， flex項目寬度基於內容物自動計算
    > 取值範圍爲 width屬性的任意值 px || rem || em || % || vw || wh 等
    > 若是flex-basis 屬性值爲 0，也須要提供單位

  • 連寫: flex: flex-grow flex-shrink flex-basis

    > `flex: 0 1 auto  //全爲默認值`
    > 絕對 flex項目 `flex: 1 1`
    > 相對 flex項目 `flex-basis: 150px`
    > flex: none `flex: 0 0 auto` 計算與內容物掛鉤
    > flex: auto `flex: 1 1 auto` 初始計算與內容物掛鉤，若有不要會自動縮放
    > flex: 'positive number' 正數能夠表明任何正數(等價於 `flex: 正數 1 0`)
    > 多個 flex-grow 不一樣的值會按比例分配剩下的空間

  • algin-self: auto || flex-start || flex-end || center || baseline || stretch(用於控制當前flex項目側軸方向上的佈局)

    > auto 繼承自父元素, 默認值爲 stretch(實際仍是繼承自父元素的默認值)

• 絕對與相對flex項目

  • 絕對 flex項目內的間距只根據內容大小計算 flex-basis: 0

    > 基於 `flex-grow` 分配空間

  • 相對 flex項目根據他的flex-grow屬性作計算 flex-basis: auto

    > 經過內容物決定初始大小

• Auto-margin對齊

  • 使用 margin: auto 致使左右兩方向會佔據全部剩餘空間
  • 使用 margin: auto 會致使justify-content失效

• 切換 flex-direction

  • flex-direction: column 致使主軸與側軸切換，導致 justify-content 與 algin-item 做用方向發生改變
• 解決問題 (6類)

• 兼容性

  • [bug列表以及變通性] https://github.com/philipwalt...

  • 某些瀏覽器容許收縮後會比本來尺寸小 flex: 0 0 90px;

    * 解決方案: flex: 1 0 auto