[CSS] Flexbox 排版模式 - Carlos-Studio

什麼是 Flexbox Model？

這是一個 CSS3 才出現的規範，Flexbox 引進了新的排版模式，解決元素分佈不均、空白等距無法自動均分的現象。所以透過 Flexbox，對於若即使無法得知 viewport 或子元素大小的寬度時，可以透過 Flexbox 的相關設定，來讓子元素自動排列，就不再需要手動去計算相關間距了。

Flexbox Model 起手式

讓我們先看一個簡單的 html 結構：

 
• 第一項
 
• 第二項
 
• 第三項

這只是一個很簡單的 ul 結構，如果今天不加上任何 css 樣式，它的呈現會如下圖：

這時我想宣告 ul 為 Flexbox Model 模式，那麼 CSS 語法就需要寫成(有額外增加樣式的調整，主要是以下的藍字及綠字)：

ul{
  display: flex;
  /* 也可以是：display: inline-flex; 此為「行內 Flex」 */
  padding:0;
}
ul > li{
  list-style: none;
}

這時結果如下圖：

發現裡面的 li 變成水平排列了，好，到這邊我們需要先瞭解幾件事情：

• ul 已經變成了 Flexbox Model 排版模式，會直接影響到其第一層子元素(Flex item(s))的排版行為。
• ul 是 Flexbox Model 中的 Flex container。
• li 是 Flexbox Model 中的 Flex item(s)，因為是 ul 的第一層子元素。
• 此範例適用於任何父子元素，不僅限於 ul、li，也可以用在任何 div 或其它元素。

Flex Container 相關屬性，此例為

共有六種屬性可以設定，讓我來一一解說

ul{
  // 第一種
  flex-direction: row || column || row-reverse || column-reverse;
}

這個屬性的設定有4個屬性值，要瞭解這四個屬性值，必須先瞭解 flexbox model 中的兩個軸： Main Axis 和 Cross Axis，請看下圖：

當 ul 設定為 display:flex 時，就代表會有這兩個隱形的軸，Main Axis 表示從左至右；Cross Axis 表示從上至下。

然而當 flex-direction 設定為以下的值時，就會影響到第一層子元素(Flex Items)的排列方向：

• row：這也是預設值，代表 Flex Items 會從左至右依序排列。
• column：代表 Flex Items 會從上至下依序排列。
• row-reverse：代表 Flex Items 會從右至左依序排列。
• column-reverse：代表 Flex Items 會從下至上依序排列。

ul{
  // 第二種
  flex-wrap: wrap || no-wrap || wrap-reverse;
}

說明：

• wrap：代表當 Flex Items 數量過多，多到 Flex Container 裝不下的時候，會斷行，會斷行的方向會是往下斷行。
  
• no-wrap：此為預設值，代表即使 Flex Items 數量過多，依然不會斷行，Flex Container 都會試圖去包含這些 Flex Items 在同一列。
  
• wrap-reverse：代表當 Flex Items 數量過多，多到 Flex Container 裝不下的時候，會斷行，會斷行的方向會是往上斷行。
  

ul{
  // 第三種
  flex-flow:  ;
}

說明：flex-flow 單純只是個 flex-direction 和 flex-wrap 同時用的縮寫，例如：flex-flow: row wrap-reverse;。

ul{
  // 第四種
  justify-content: flex-start || flex-end || center || space-between || space-around;
}

說明：justify-content 是用來定義 Flex Items 該如何在 Main Axis 排列。例：

• flex-start：這是預設值。代表 Flex Items 從 Main Axis 的起點開始排列。
  
• flex-end：代表 Flex Items 整個的結尾要往 Main Axis 的尾端貼齊。
  
• center：同上意義，只是要針對 Main Axis 來置中。
  
• space-between：各個 Flex Item 延著 Main Axis 平均分散，但 Flex Item 之間，要保持相同距離。
  
• space-around：各個 Flex Item 延著 Main Axis 平均分散，但每一個 Flex Item 周圍都要保持相同的距離。
  另外以下這張圖更能清礎說明 space-around 的意義：
  

ul{
  // 第五種
  align-items: flex-start || flex-end || center || stretch || baseline;
}

說明：align-items 與 justify-content 非常相似，只是是用來定義 Flex Items 該如何在 Cross Axis 排列。例：

• flex-start：代表 Flex Items 高度並不會增加至 Flex Container 的高度，各 Flex Items 會直接對齊 Cross Axis 的起點。
  
• flex-end：代表 Flex Items 高度並不會增加至 Flex Container 的高度，各 Flex Items 會直接對齊 Cross Axis 的最終點。
  
• center：各 Flex Items 會直接對齊 Cross Axis 的中間。
  
• stretch：這是預設值。代表 Flex Items 的高度，沿著 Cross Axis，都會自動增加高度至 Flex Container 的高度。
  
• baseline：會依據 Flex Items 的 baseline 來對齊。
  以下這張圖也許更能看出 baseline 的對齊方式：
  

ul{
  // 第六種
  align-content: flex-start || flex-end || center || stretch;
}

說明：align-content 主要是用在 Flex Container 中的 Flex Items 產生多行時，那麼這些 Flex Item 該如何針對 Cross Axis 來排列。例：

• flex-start：即使遇到 Flex Items 斷行，會沿著 Cross Axis 如下排列(置頂)：
  
• flex-end：即使遇到 Flex Items 斷行，會沿著 Cross Axis 會如下排列(置底)：
  
• center：即使遇到 Flex Items 斷行，會沿著 Cross Axis 會如下排列(置中)：
  
• stretch：這是預設值，即使遇到 Flex Items 斷行，各 flex-items 的高度會沿著 Cross Axis 自動增減。
  

Flex Item 相關屬性，此例為

ul > li{
  // 第一種
  order: ; // 預設值是 0
}

ul > li:first-child{
  order:1;
}

ul > li{
  // 第二種
  flex-grow: 0 || ; // 預設值是 0
}

ul > li:first-child{
  flex-grow:1;
}

ul > li{
  // 第三種
  flex-shrink: 0 || 1 || ; // 預設值是 1
}

ul > li{
  // 第四種
  flex-basis: auto ||  ||  ||  ||  etc; // 預設值是 auto
}

ul > li:first-child{
  flex-basis: 100px;
}

ul > li{
  // 第五種
  flex:   ; // 預設值依序是 0 1 auto;
}

ul > li:nth-child(1){
  // 第六種
  align-self: auto || flex-start || flex-end || center || baseline || stretch; // 預設值是 stretch;
}