Flex 佈局筆記

Flex 佈局筆記

• Flex 佈局筆記
  • 什麼是 Flex 佈局
  • Flex 佈局的基本概念
  • Flex 佈局使用的屬性
  • 常見佈局的 Flex 寫法
    • 使用 flex 實現左側固定右側浮動兩欄佈局

什麼是 Flex 佈局

Flexible Box 模型，一般被稱爲 flexbox，是一種一維的佈局模型。它給 flexbox 的子元素之間提供了強大的空間分佈和對齊能力。

CSS 標準爲咱們提供了 3 種佈局方式：標準文檔流、浮動佈局和定位佈局。這幾種方式的搭配使用能夠輕鬆搞定 PC 端頁面的常見需求，但有着缺乏語義、不夠靈活的缺點。咱們須要的是經過 1 個屬性就能優雅的實現子元素居中或均勻分佈，甚至能夠隨着窗口縮放自動適應。在這樣的需求下，CSS 的第 4 種佈局方式誕生了，這就是咱們今天要重點介紹的 flex 佈局。

Flex 佈局的基本概念

「容器」：採用 Flex 佈局的元素，稱爲 Flex 容器（flex container），簡稱「容器」。

「項目」：它的全部子元素自動成爲容器成員，稱爲 Flex 項目（flex item），簡稱「項目」。

容器默認存在兩根軸：水平的 主軸（main axis） 和垂直的 交叉軸（cross axis）。

主軸的開始位置（與邊框的交叉點）叫作main start，結束位置叫作main end；交叉軸的開始位置叫作cross start，結束位置叫作cross end。

項目默認沿主軸排列。單個項目佔據的主軸空間叫作main size，佔據的交叉軸空間叫作cross size。

Flex 佈局使用的屬性

容器一共有 6 個屬性：（括號內爲可能的值，加粗爲默認值）

• flex-direction（row | row-reverse | column | column-reverse）
  主軸方向：默認row爲水平方向從左到右。
• flex-wrap（nowrap | wrap | wrap-reverse）
  元素排列是否換行。
• flex-flow
  flex-direction 和 flex-wrap 屬性的簡寫形式。默認值爲 row nowrap。
• justify-content（flex-start | flex-end | center | space-between | space-around）
  項目在主軸上的對齊方式。
• align-items（flex-start | flex-end | center | baseline | stretch）
  項目在交叉軸上的對齊方式。
• align-content（flex-start | flex-end | center | space-between | space-around | stretch）
  多根軸線之間的對齊方式。

項目一共有 6 個屬性：

• order（integer）
  項目排列順序，越小排列越靠前，默認爲 0。
• flex-grow（number）
  項目的放大比例，默認爲 0，即若是存在剩餘空間也不放大。
• flex-shrink（number）
  項目的縮小比例，默認爲1，即若是空間不足，該項目將縮小。
  若是全部項目的flex-shrink屬性都爲1，當空間不足時，都將等比例縮小。
  若是一個項目的flex-shrink屬性爲0，其餘項目都爲1，則空間不足時，前者不縮小。
  負值對該屬性無效。
• flex-basis（length | auto）
  flex-basis屬性定義了在分配多餘空間以前，項目佔據的主軸空間（main size）。瀏覽器根據這個屬性，計算主軸是否有多餘空間。它的默認值爲auto，即項目的原本大小。
• flex
  flex-grow, flex-shrink 和 flex-basis的簡寫，默認值爲 0 1 auto。後兩個屬性可選。
• align-self（auto | flex-start | flex-end | center | baseline | stretch）
  align-self屬性容許單個項目有與其餘項目不同的對齊方式，可覆蓋 align-items 屬性。
  默認值爲 auto，表示繼承父元素的align-items屬性，若是沒有父元素，則等同於stretch。

常見佈局的 Flex 寫法

本欄目記錄本身實際運用過程當中遇到的狀況和解決辦法。
一些常見佈局的寫法能夠在阮一峯的博客中找到。

使用 flex 實現左側固定右側浮動兩欄佈局

.wrapper-flex {
    display: flex;
    align-items: flex-start;
}

.wrapper-flex .left {
    flex: 0 0 auto;
}

.wrapper-flex .right {
    flex: 1 1 auto;
}

須要注意：flex容器的一個默認屬性值:align-items: stretch;。這個屬性致使了列等高的效果。 爲了讓兩個盒子高度自動，須要設置: align-items: flex-start;

本文基於阮一峯的博客整理而成，在此表示感謝。