英文原文：A Visual Guide to CSS3 Flexbox Properties
譯文地址：http://w3ctrain.com/2015/11/12/visual-guide-to-css3-flexbox-flexbox-playground/

彈性盒模型（Flexbox Layout）是CSS3新增的一種布局模式轧邪。它可以很方便地用來改善動態(tài)或未知大小的子元素在父元素中的對齊勉失，方向和順序等等。flex容器的主要特性是它可以調(diào)整子元素的寬度或高度去填充可用的空白區(qū)舔涎，以最優(yōu)的方式達(dá)到兼容不同屏幕大小。

很多設(shè)計(jì)師和開發(fā)人員發(fā)現(xiàn)flexbox布局很容易使用获列，因?yàn)樵氐亩ㄎ环浅：唵喂仁校恍枰獙懞苌俚拇a，就能達(dá)到預(yù)期效果击孩。Flexbox布局算法不同于那些基于垂直或水平的塊或內(nèi)聯(lián)布局迫悠。Flexbox布局應(yīng)該用在小項(xiàng)目中的組件。

這篇文章主要集中在說明flex屬性如何影響布局巩梢，而不是這些屬性如何工作创泄。

可能你會覺得flex很多屬性很難記住，或是看了很多文字說明但是不知道具體效果如何括蝠，那么這篇文章就非常適合你了鞠抑。

讓我們開始吧！

BASICS

在我們開始之前先來定下規(guī)則又跛，我們把父容器稱為flex container碍拆，它的直接子元素稱為flex items。

上面的盒子中慨蓝，你可以看到用來描述flex container 和 它的子元素的屬性與術(shù)語感混。如果你需要查看更多，點(diǎn)擊這里礼烈。

flexbox從2009年的初稿走到現(xiàn)在弧满，經(jīng)歷了時間的洗練和各種語法的變更。所以為了避免沖突庭呜，這篇文章我們只使用最新并且有效的版本。如果你需要兼容舊瀏覽器犀忱，你可以看看這篇文章阴汇。(英文)

最新的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-)

如果你需要查看更多瀏覽器兼容性数冬，你可以看這里

USAGE

使用flexbox布局，你需要在父元素上設(shè)置display屬性

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

或者你可以把它當(dāng)行內(nèi)元素使用

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

注意：你給父容器設(shè)置了這個屬性后搀庶，它的子元素都會自動變成flex items拐纱。

有很多種給flexbox屬性分組的方式，到目前為止哥倔，我認(rèn)為最簡單秸架，并且最容易理解的方式是按照flex container和flex items分成兩組。下面咆蒿，我們來解釋各個元素是如何影響布局效果的东抹。

Flexbox Container 屬性

flex-direction
這個屬性指定了flex items在flex container中是如何布局的蚂子。通過設(shè)置flex container的主軸的方向，它們會按照兩個方向布局缆镣，水平的行或者垂直的列试浙。

例子：

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

設(shè)置為行寞蚌，那么在ltr上下文環(huán)境下田巴，所有flex items會按照從左到右的順序排成一行。

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

使用row-reverse屬性壹哺，那么在ltr上下文環(huán)境下艘刚，子元素則會按照從右到左的順序排成一行管宵。

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

使用column屬性，flex items會按照從上到下的方式排列攀甚。

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

使用column-reverse秋度，則會放過來。

默認(rèn)值：row

注：row和row-reverse的排列方式取決于書寫模式埠居，所以如果是在rtl上下文環(huán)境下事期，它們都會反轉(zhuǎn)兽泣。

flex-wrap

默認(rèn)的flexbox概念是把所有子元素都放在一行里面，你可以通過flex-wrap屬性來控制flex container是否將子元素分多行處理金踪，以及新增行的方向牵敷。

例子：

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

Flex items會被置在一行里面枷餐，并且默認(rèn)它們會被壓縮來適應(yīng)容器的寬度。

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

wrap, Flex items會被按照從上到下從左到右的順序分配到多行怨咪。

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

wrap-reverse, Flex itms會被按照從左到右從下到上的順序在多行中顯示。

默認(rèn)值：nowrap

注：這個屬性也跟書寫模式相關(guān)诗眨。

flex-flow

這個屬性是flex-direction和flex-wrap屬性的縮寫匠楚。

例子：

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

默認(rèn)值：row nowrap

justify-content

這個屬性會根據(jù)當(dāng)前容器的主軸來排列子元素。它可以在所有flex items都在同一行并且不可伸縮峡懈，或是可伸縮但是達(dá)到它們的最大尺寸時候肪康，分配剩余空間撩穿。

例子：

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

Flex items在lrt上下文中會向左邊靠攏

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

Flex items在ltr上下文中向右靠攏

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

Flex items會居中

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

除了第一個和最后一個冗锁，F(xiàn)lex items會有相同的間隔冻河。

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

所有Flex item 都會有相同間隔

默認(rèn)值： flex-start

align-items

Flex items 會根據(jù)當(dāng)前容器的主軸線對齊叨叙，跟justify-content很相似，但是方向垂直味滞。這個屬性設(shè)置所有flex items默認(rèn)對齊方式钮呀。例子：

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

Flex items會占滿flex container的高度爽醋，從cross start到cross end

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

Flex items會與flex container 的交叉軸起始(cross start)線對齊蚂四。

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

Flex items會與flex container 的交叉軸結(jié)尾（cross end）線對齊哪痰。

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

Flex items會在交叉軸（cross axis）上對齊

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

Flex items會按照它們的基線（baselines）對齊

默認(rèn)值：stretch
注：點(diǎn)擊這里查看更多關(guān)于基線如何運(yùn)算

align-content

align-content屬性對齊flex container上的行，控制交叉軸的多余間隔筷弦，跟主軸上的justify-content屬性很相似奸笤。

例子：

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

每一行Flex items后面都會有區(qū)分開的間隔哼鬓。

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

Flex items會向交叉軸起始位置靠攏

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

Flex items 會向交叉軸的結(jié)束位置靠攏

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

flex items的行會在交叉軸上居中顯示

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

除了起始和結(jié)尾行健盒，flex items的其他行都會有相同的間隔称簿。

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

每一行都會有相同上下間隔

默認(rèn)值：stretch
注：這個屬性只會在flex container有多行的時候才會有效憨降，如果只有一行那么這個屬性就不會有效果。

關(guān)于flex containers

• 所有的column-*屬性在flex container上都不會有效果
• ::first-line 與 ::first-letter偽類在flex container上不會被應(yīng)用士嚎。

FlexBox Item 屬性

Order
order屬性定義子元素在父容器中的順序莱衩，默認(rèn)它們會被最加到后面

例子：

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

不需要調(diào)整HTML娇澎，就能修改顯示順序

默認(rèn)值:0

flex-grow

這個屬性是一個flex拉伸因子趟庄，決定了flex items會相對于父容器剩余空間增長多少。

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

如果所有flex items都有相同的flex-grow奋单，那么他們都會在父容器中有相同的尺寸虑鼎。

調(diào)整一下，看看有什么區(qū)別

默認(rèn)值：0
注：負(fù)數(shù)是不合法的

flex-shrink

flex-shrink是一個flex收縮因子絮短，它決定了當(dāng)父容器體積不足時昨忆，flex items收縮的相對比例邑贴。

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

默認(rèn)所有flex items都是可以壓縮的，但如果我們把它設(shè)為0奖磁，那么它將保持原有大小繁疤。

默認(rèn)值： 1**
注：**負(fù)數(shù)是不合法的

flex-basis

這個屬性會設(shè)置寬度和高度稠腊，原文為：This property takes the same values as the width and height properties并在flex因子分割間隔之前，指定flex items的初始大小吞彤。

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

flex-basis會指定第四個flex items的初始大小

默認(rèn)值： auto

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> ];
}

默認(rèn)值：0 1 auto
注：w3c鼓勵使用簡寫懂盐，而不是每個屬性都分開寫糕档。

align-self

這個屬性允許為單個flex 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;
}

關(guān)于flex items

• float, clear俐银，vertical-align在flex item上都不會有作用捶惜，也不會讓它脫離文檔流荔烧。