轉載：CSS3 Flexbox可視化指南

0. 目錄

 

• 目錄
• 引言
• 正文
  • 1 引入
  • 2 基礎
  • 3 使用
  • 4 彈性容器Flex container屬性
    • 41 flex-direction
    • 42 flex-wrap
    • 43 flex-flow
    • 44 justify-content
    • 45 align-items
    • 46 align-content
    • 47 注意事項
  • 5 彈性子元素Flex item屬性
    • 51 order
    • 52 flex-grow
    • 53 flex-shrink
    • 54 flex-basis
    • 55 flex
    • 56 align-self
    • 57 注意
  • 6 Flexbox實驗場
• 聲明

 

1. 引言

原文：scotch.io的A Visual Guide to CSS3 Flexbox Properties 
譯者：前端開發whqet，意譯爲主不當之處，歡迎指正！ 
譯言：但願能夠經過可視化的方式幫助您瞭解Flexbox屬性如何影響flex佈局。你們能夠到原文demo那裏先一睹爲快,注意，需FQ瀏覽（由於原文調用google api插件），咱們提供了另外的在線實驗平臺，或者你也能夠到github關注、下載。

2. 正文

2.1 引入

Flexbox佈局官方稱爲CSS Flexible Box Layout Module是一個CSS3新的佈局模塊，用於實現容器裏項目的對齊、方向、排序（即便在項目大小位置、動態生成的狀況）。flex容器最大的特性在於，可以修改子元素的寬度和高度，以知足在不一樣尺寸屏幕下的如意分佈。

許多設計人員、開發人員發現flexbox佈局方式使用簡單，定位元素更加簡單、複雜的佈局更容易用較少的代碼實現，大大地簡化了開發流程。不像塊狀佈局、內聯佈局那樣基於豎直方向、水平方向，flexbox的佈局算法基於方向。flexbox佈局適用於小的應用組件、新的CSS Grid佈局模塊更適用於大量的佈局。

本指南不解釋flex屬性如何工做，咱們只是用可視化的方式展現flex屬性如何影響佈局。

2.2 基礎

在具體描述flex屬性以前，咱們先來簡要介紹下flexbox模型。flex佈局由父容器（咱們叫作flex container）和它的子元素（咱們叫作flex items）組成。 

在上圖所示的盒子裏，你能夠看到用來描述flex container和flex items的屬性和術語，若是你想了解詳細信息，請訪問W3C的flexbox model官方文檔.

flexbox自2009的初次草案開始，已經經歷了幾回更新和語法修改，爲了不困惑、保證清晰，咱們僅僅使用2014年9月最後一次工做草案中的語法。若是您想要實現舊瀏覽器的兼容，請訪問這篇文章尋找最佳實踐。

最近的flexbox規範瀏覽器支持狀況以下：

• Chrome 29+
• Firefox 28+
• Internet Explorer 11+
• Opera 17+
• Safari 6.1+ (prefixed with -webkit-)
• Android 4.4+
• iOS 7.1+ (prefixed with -webkit-)

您也能夠到caniuse瞭解瀏覽器兼容狀況詳情。

本文中的用到的一些術語的表達約定以下

1. flex-container-彈性容器
2. flex-item-彈性子元素
3. main axis-主軸
4. cross axis-側軸

2.3 使用

使用flexbox只須要在父元素上設置display屬性便可。

.flex-container { display: -webkit-flex; /* Safari */ display: flex; }

• 1
• 2
• 3
• 4

若是您想讓它之內聯方式顯示，則

.flex-container { display: -webkit-inline-flex; /* Safari */ display: inline-flex; }

• 1
• 2
• 3
• 4

注意：僅僅須要在父元素上設置這一個屬性便可，它的子元素會自動變成flex items。

有不少方式分組flexbox的全部屬性，我發現最容易理解的方式是分紅兩組，一組爲彈性容器的屬性，另外一組爲彈性子元素的屬性，接下來咱們按這種方式來一一解析。

2.4 彈性容器（Flex container）屬性

2.4.1 flex-direction

該屬性經過設置flex container主座標軸方向影響子元素(flex item)如何在容器中排布。咱們能夠設置兩個主要的方向水平和垂直方向。

能夠接受的值有四個row、row-reverse、column、column-reverse，以下所示。

.flex-container { -webkit-flex-direction: row; /* Safari */ flex-direction: row; }

• 1
• 2
• 3
• 4

彈性子元素將會按照自左向右的水平排列。 

.flex-container { -webkit-flex-direction: row-reverse; /* Safari */ flex-direction: row-reverse; }

• 1
• 2
• 3
• 4

彈性子元素將會自右向左水平排列。 

.flex-container { -webkit-flex-direction: column; /* Safari */ flex-direction: column; }

• 1
• 2
• 3
• 4

彈性子元素將自上而下豎直排列 

.flex-container { -webkit-flex-direction: column-reverse; /* Safari */ flex-direction: column-reverse; }

• 1
• 2
• 3
• 4

彈性子元素將自下而上豎直排列 

默認值爲row. 
注意，row和row-reverse是基於書寫順序的，因此在rtl環境下將會反置。

2.4.2 flex-wrap

flexbox最初的理念是保持彈性容器的子元素在一行中。flex-wrap屬性控制當子元素items超出彈性容器範圍是是否換行，以及新行的方向。

本屬性能夠接受一下幾個值：no-wrap、wrap、wrap-reverse，分別以下所示。

.flex-container { -webkit-flex-wrap: nowrap; /* Safari */ flex-wrap: nowrap; }

• 1
• 2
• 3
• 4

彈性子元素將會在一行顯示，默認的子元素items將會縮減以適應彈性容器的寬度。 

.flex-container { -webkit-flex-wrap: wrap; /* Safari */ flex-wrap: wrap; }

• 1
• 2
• 3
• 4

若是須要的話，彈性子元素將會自左向右、自上而下地多行顯示。 

.flex-container { -webkit-flex-wrap: wrap-reverse; /* Safari */ flex-wrap: wrap-reverse; }

• 1
• 2
• 3
• 4

若是須要的話，彈性子元素將會自左向右、自下而上地多行顯示。 

默認值爲no-wrap. 
注意，這些屬性也是基於書寫順序的，因此在rtl環境下將會反置。

2.4.3 flex-flow

flex-flow屬性是flex-direction和flex-wrap屬性的快捷方式，複合屬性。

.flex-container { -webkit-flex-flow: <flex-direction> || <flex-wrap>; /* Safari */ flex-flow: <flex-direction> || <flex-wrap>; }

• 1
• 2
• 3
• 4

默認值爲row nowrap.

2.4.4 justify-content

justify-content設置彈性子元素在彈性容器中當前行主座標的對齊方式，當彈性容器裏一行上的全部子元素都不能伸縮或已經達到其最大值時，該屬性可協助對多餘的空間進行分配。

能夠接受的值爲flex-start、flex-end、center、space-between、space-around等五個值，默認值爲flex-start。詳細以下所示。

.flex-container { -webkit-justify-content: flex-start; /* Safari */ justify-content: flex-start; }

• 1
• 2
• 3
• 4

在ltr環境下，彈性子元素flex items將會彈性容器中左對齊。 

.flex-container { -webkit-justify-content: flex-end; /* Safari */ justify-content: flex-end; }

• 1
• 2
• 3
• 4

在ltr環境下，彈性子元素flex items將會彈性容器中右對齊。 

.flex-container { -webkit-justify-content: center; /* Safari */ justify-content: center; }

• 1
• 2
• 3
• 4

彈性子元素flex items將會彈性容器中居中對齊。

.flex-container { -webkit-justify-content: space-between; /* Safari */ justify-content: space-between; }

• 1
• 2
• 3
• 4

彈性子元素flex items中的第一個、最後一個對齊彈性容器的邊緣，其他均勻分佈。 

.flex-container { -webkit-justify-content: space-around; /* Safari */ justify-content: space-around; }

• 1
• 2
• 3
• 4

彈性子元素flex items中的任何一個都參與均勻分佈，即便是第一個和最後一個。 

2.4.5 align-items

align-items設置彈性子元素在彈性容器中當前行側軸上的對齊方式，跟justify-content相似可是做用於側軸（flex-direction爲row和row-reverse時爲縱軸，flex爲column和column-reverse時爲橫軸）。該屬性設置全部flex items(包含匿名的item)的默認對齊方式。

能夠接受的值爲flex-start、flex-end、center、baseline、stretch等五個值，默認值爲stretch。詳細以下所示。

.flex-container { -webkit-align-items: stretch; /* Safari */ align-items: stretch; }

• 1
• 2
• 3
• 4

彈性子元素將會從側軸開始到側軸結束鋪滿整個高度（寬度）。 

.flex-container { -webkit-align-items: flex-start; /* Safari */ align-items: flex-start; }

• 1
• 2
• 3
• 4

彈性子元素將會堆棧在彈性容器的側軸開始位置。 

.flex-container { -webkit-align-items: flex-end; /* Safari */ align-items: flex-end; }

• 1
• 2
• 3
• 4

彈性子元素將會堆棧在彈性容器的側軸結束位置。 

.flex-container { -webkit-align-items: center; /* Safari */ align-items: center; }

• 1
• 2
• 3
• 4

彈性子元素將會堆棧在彈性容器的側軸中間位置。 

.flex-container { -webkit-align-items: baseline; /* Safari */ align-items: baseline; }

• 1
• 2
• 3
• 4

彈性子元素將會以文字基線的方式對齊。 

注意，經過這裏瞭解基線計算的更多細節。

2.4.6 align-content

當彈性容器側軸中有空白時，align-content屬性設置伸縮行的對齊方式，正如justify-content在主軸上設置對齊方式同樣。

能夠接受的值爲：stretch、flex-start、flex-end、center、space-between、space-around等, 默認值爲stretch。

.flex-container { -webkit-align-content: stretch; /* Safari */ align-content: stretch; }

• 1
• 2
• 3
• 4

各行平分剩餘空間。 

.flex-container { -webkit-align-content: flex-start; /* Safari */ align-content: flex-start; }

• 1
• 2
• 3
• 4

各行堆棧緊靠側軸起始邊界。 

.flex-container { -webkit-align-content: flex-end; /* Safari */ align-content: flex-end; }

• 1
• 2
• 3
• 4

各行堆棧緊靠側軸結束邊界。 

.flex-container { -webkit-align-content: center; /* Safari */ align-content: center; }

• 1
• 2
• 3
• 4

各行堆棧位於側軸居中位置。 

.flex-container { -webkit-align-content: space-between; /* Safari */ align-content: space-between; }

• 1
• 2
• 3
• 4

各行之間空白均勻分佈，第一行和最後一行緊靠側軸邊緣。 

.flex-container { -webkit-align-content: space-around; /* Safari */ align-content: space-around; }

• 1
• 2
• 3
• 4

各行在彈性盒子中均勻分佈，兩端保留子元素與子元素之間間距大小的一半。 

注意

• 該屬性只做用於彈性容器裏擁有多行的狀況，若是隻有單行該屬性無效。另外。

• 上面所說的「行」指的是主軸方向的平行的數據，例如flex-direction值爲row、row-reverse時指數據行，值爲column、column-reverse時指數據列。

  2.4.7 注意事項

• 全部的column-屬性對彈性容器無效
• ::first-line和::first-letter僞對象對彈性容器無效

2.5 彈性子元素（Flex item）屬性

2.5.1 order

order屬性控制彈性容器裏子元素的順序，默認狀況下按照彈性容器裏添加的順序排列。

能夠接受的值爲整型數字，默認值爲0.

.flex-item { -webkit-order: <integer>; /* Safari */ order: <integer>; }

• 1
• 2
• 3
• 4

彈性子元素將按照給定的數字進行排列，以下圖所示。 

2.5.2 flex-grow

該屬性設置彈性子元素的擴展比率（flex-grow），該值決定某個子元素相對於其餘普通子元素的擴展大小。

可接受值爲數字，默認值爲0，負數無效。

.flex-item { -webkit-flex-grow: <number>; /* Safari */ flex-grow: <number>; }

• 1
• 2
• 3
• 4

若是全部的彈性子元素具備相等的flex-grow值，那麼全部的子元素將具備相同的大小。 

第二個元素能夠相對比較大，以下圖所示。 

2.5.3 flex-shrink

該屬性設置彈性子元素的收縮比率（flex-shrink），該值決定某個子元素相對於其餘普通子元素的收縮大小。

.flex-item { -webkit-flex-shrink: <number>; /* Safari */ flex-shrink: <number>; }

• 1
• 2
• 3
• 4

默認狀況下全部子元素均可以被收縮，若是設置爲0，則不收縮。 

2.5.4 flex-basis

該屬性指定彈性子元素伸縮前的默認大小值，至關於width和height屬性。

.flex-item { -webkit-flex-basis: auto | <width>; /* Safari */ flex-basis: auto | <width>; }

• 1
• 2
• 3
• 4

可接受值爲數字、百分比和auto，默認值爲auto（ 
無特定寬度值，取決於其它屬性）。

以下圖所示，咱們設置第四個子元素的寬度值。 

注意，將來可能將會引入新的關鍵字。

2.5.5 flex

該屬性爲flex-grow, flex-shrink和flex-basis屬性的複合屬性，一個簡寫的方式。

.flex-item { -webkit-flex: none | auto | [ <flex-grow> <flex-shrink>? || <flex-basis> ]; /* Safari */ flex: none | auto | [ <flex-grow> <flex-shrink>? || <flex-basis> ]; }

• 1
• 2
• 3
• 4

默認值爲：0 1 auto。

注意， W3C推薦使用複合屬性的方式，由於複合屬性的方式能夠方便地重置沒有指定具體值的屬性以適應大部分的常規應用。

2.5.6 align-self

align-self容許獨立的彈性子元素覆蓋彈性容器的默認對齊設置(align-items)。你們到align-items部分獲取不一樣值得不一樣表現方式。

.flex-item { -webkit-align-self: auto | flex-start | flex-end | center | baseline | stretch; /* Safari */ align-self: auto | flex-start | flex-end | center | baseline | stretch; }

• 1
• 2
• 3
• 4

默認值爲auto。

第三個和第四個彈性子元素將使用align-self屬性覆蓋默認對齊方式。 

Note: The value of auto for align-self computes to the value of align-items on the element’s parent, or stretch if the element has no parent.

注意，指定algin-self爲auto時，將使用彈性容器的align-items屬性或者若是沒有父對象時使用stretch屬性。

2.5.7 注意

• float、clear、vertical-align對flex item無效。

2.6 Flexbox實驗場

原文的實驗場angular地址被牆，我fork了下進行了修改，請你們在線研究，或者到github關注原項目。