flex 佈局：語法

flex 佈局

• 參考地址 連接
• layout(網頁佈局)是 css 的一個重點應用
• 傳統的解決方案，基於盒裝模型，依賴display 屬性 + position屬性 + floaa屬性。對於特殊佈局很是不方便(好比垂直居中)
• flex佈局能夠簡便，完整，響應式地實現各類頁面佈局，目前已獲得全部瀏覽器的支持。

---

flex佈局概念

• flex 是 Flexible Box 的縮寫，意爲"彈性佈局"，用來爲盒裝模型提供最大的靈活性。
• 設爲 flex 佈局之後，子元素的float，clear和vertical-align屬性將失效。

用法：

.box{
    //容器使用
    display:flex;
    //行內元素使用
    display:inline-flex;
}
複製代碼

• 採用flex佈局的元素，稱爲flex容器，它的全部子元素自動成爲容器成員，稱爲flex項目。

容器默認存在兩根軸：水平的主軸和垂直的交叉軸。株洲開始的位置叫作 main start，結束位置叫作 main end；交叉軸開始的位置叫作 cross start，結束的位置叫作 cross end。項目默認沿主軸排列，單個項目佔據的主軸空間叫作 main size，佔據交叉空間叫作 cross size

容器的屬性

• flex-direction
  • 決定主軸的方向

  .box {
  flex-direction: row | row-reverse | column | column-reverse;
  }
  複製代碼

• flex-warp

  • 若是一條軸線拍不下，如何換行

  .box{
    //nowrap(默認，不換行)  wrap 換行，第一行在上方  warp-reverse 換行，第一行在下方
    flex-wrap: nowrap | wrap | wrap-reverse;
  }
  複製代碼

• flex-flow

  • 是 flex-direction + flex-warp 屬性的簡寫形式，默認爲 row nowarp

  .box {
    flex-flow: <flex-direction> || <flex-wrap>;
  }
  複製代碼

• justify-content

  • 定義了項目在主軸上的對齊方式

  .box {
    //flex-start 左對齊(默認值)  
    //flex-end 右對齊
    //center 居中 
    //space-between 兩端對齊，項目之間的間隔都相等
    //space-around 每一個項目兩側的間隔相等。項目之間的間隔比項目與邊框的間隔大一倍
    justify-content: flex-start | flex-end | center | space-between | space-around;
  }
  複製代碼

• align-items

  • 定義項目在交叉軸上如何對其

  .box {
    //flex-start 交叉軸的起點對齊
    //flex-end 交叉軸的終點對齊
    //center 交叉軸的中點對齊
    //baseline 項目的第一行文字的基線對齊
    //stretch(默認值) 若是項目未設置高度或設爲auto，將佔滿整個容器的高度
    align-items: flex-start | flex-end | center | baseline | stretch;
  }
  複製代碼

• align-content

  • 定義了多跟軸線的對齊方式。若項目只有一根軸線，該屬性不起做用

  .box {
    //flex-start 與交叉軸的起點對齊
    //flex-end 與交叉軸的終點對齊
    //center 與交叉軸的中點對齊
    //space-between 與交叉軸兩端對齊，軸線之間的間隔平均分佈
    //space-around 每根軸線兩側的間隔都相等。因此，軸線之間的間隔比軸線與邊框的間隔大一倍
    //stretch(默認值) 軸線佔滿整個交叉軸
    align-content: flex-start | flex-end | center | space-between | space-around | stretch;
  }
  複製代碼

項目的屬性

• order

  • 定義項目排序規則，數值越小，排序越靠前，默認爲0

  .item {
    order: <integer>;
  }
  複製代碼

• flex-grow

  • 定義項目的放大比例，默認爲0，即存在剩餘空間也不放大。根據flex-grow值的佔比分剩餘空間

  .item {
    flex-grow: <number>; /* default 0 */
  }
  複製代碼

• flex-shrink

  • 定義了項目的縮小比例，默認爲1，即若是空間不足，該項目將縮小，若爲0，則當項目空間不足時不縮小

  .item {
    flex-shrink: <number>; /* default 1 */
  }
  複製代碼

• flex-basis

  • 定義了在分配多餘空間以前，項目佔據的主軸空間(main size)。瀏覽器根據這個屬性，計算主軸是否有多餘空間。它的默認值爲auto，即項目的原本大小。能夠設置相似於width的(px)，則項目將佔據固定空間

  .item {
    flex-basis: <length> | auto; /* default auto */
  }
  複製代碼

• flex

  • flex屬性是flex-grow, flex-shrink 和 flex-basis的簡寫，默認值爲0 1 auto。後兩個屬性可選
  • 該屬性有兩個快捷值：auto (1 1 auto) 和 none (0 0 auto)【建議優先使用

  .item {
    flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
  }
  複製代碼

• align-self

  • align-self屬性容許單個項目有與其餘項目不同的對齊方式，可覆蓋align-items屬性。默認值爲auto，表示繼承父元素的align-items屬性，若是沒有父元素，則等同於stretch。
  • 該屬性可能取6個值，除了auto，其餘都與align-items屬性徹底一致。

  .item {
    align-self: auto | flex-start | flex-end | center | baseline | stretch;
  }
  複製代碼