上一篇疏之，我學(xué)習(xí)并整理了使用flex時(shí)仍律，需要注意的兼容性問題。那么今天就來學(xué)習(xí)一下有關(guān)flex語法的東西低零。
先看一下flex布局的總體圖婆翔，然后我們再慢慢學(xué)習(xí)。
背景
我本來覺得掏婶，我寫過許多的CSS樣式了啃奴，對flex的應(yīng)用也算嫻熟了，起碼經(jīng)常寫的布局气堕，我都能不費(fèi)勁兒的寫出來了纺腊，flex布局的相關(guān)東西我也看了不少，當(dāng)我看到這段代碼時(shí)茎芭，我發(fā)現(xiàn)自己會(huì)的那點(diǎn)東西揖膜，簡直不值得一提，不過沒關(guān)系梅桩，那么讓我從新學(xué)起壹粟，我就不信學(xué)不會(huì)，掌握不了宿百。
.item-input textarea {
-webkit-box-flex: 1;
-webkit-flex: 1 0 220px;
-moz-box-flex: 1;
-moz-flex: 1 0 220px;
-ms-flex: 1 0 220px;
flex: 1 0 220px;
}
>上一篇《CSS之flex兼容性》中詳細(xì)介紹了趁仙，*兼容性*的由來，那么在這我就不多做解釋了垦页。直接開始學(xué)習(xí)這些語法雀费。
## 簡介
2009年，W3C提出了一種新的方案----Flex布局痊焊，可以簡便盏袄、完整、響應(yīng)式地實(shí)現(xiàn)各種頁面布局薄啥。目前辕羽，它已經(jīng)得到了所有瀏覽器的支持，這意味著垄惧，現(xiàn)在就能很安全地使用這項(xiàng)功能刁愿。
## Flex Box 是什么？
CSS3 彈性盒子(Flex Box)彈性盒子是 CSS3 的一種新的布局模式到逊。
CSS3 彈性盒（ Flexible Box 或 flexbox）铣口，是一種當(dāng)頁面需要適應(yīng)不同的屏幕大小以及設(shè)備類型時(shí)確保元素?fù)碛星‘?dāng)?shù)男袨榈牟季址绞健?引入彈性盒布局模型的目的是提供一種更加有效的方式來對一個(gè)容器中的子元素進(jìn)行排列滤钱、對齊和分配空白空間。
任何一個(gè)容器都可以指定為Flex布局脑题。
**容器內(nèi)可以包含一個(gè)或者多個(gè)彈性子元素菩暗。彈性子元素通常在彈性盒子內(nèi)一行顯示。默認(rèn)情況下每個(gè)容器只有一行旭蠕。**
e.g.：
.box{
display: flex;
}
// 行內(nèi)元素也可以
.box{
display: inline-flex;
}
*<u>注意，設(shè)為Flex布局以后旷坦，子元素的float掏熬、clear和vertical-align屬性將失效。</u>*
## 基本概念
采用Flex布局的元素秒梅，稱為Flex容器（flex container）旗芬，簡稱"容器"。它的所有子元素自動(dòng)成為容器成員捆蜀，稱為Flex項(xiàng)目（flex item）疮丛，簡稱"子元素"。
**容器默認(rèn)存在兩根軸：**
<u>水平的主軸（main axis）和垂直的交叉軸（cross axis）辆它。主軸的開始位置（與邊框的交叉點(diǎn)）叫做main start誊薄，結(jié)束位置叫做main end；交叉軸的開始位置叫做cross start锰茉，結(jié)束位置叫做cross end呢蔫。
項(xiàng)目默認(rèn)沿主軸排列。單個(gè)項(xiàng)目占據(jù)的主軸空間叫做main size飒筑，占據(jù)的交叉軸空間叫做cross size片吊。</u>
## 容器的屬性
### 1. flex-direction屬性
flex-direction屬性決定主軸的方向（即子元素的排列方向）。
.box {
flex-direction: column-reverse | column | row | row-reverse ;
}
它有4個(gè)值：
* row（默認(rèn)值）：主軸為水平方向协屡，起點(diǎn)在左端俏脊。
* row-reverse：主軸為水平方向，起點(diǎn)在右端肤晓。
* column：主軸為垂直方向爷贫，起點(diǎn)在上沿。
* column-reverse：主軸為垂直方向材原，起點(diǎn)在下沿沸久。
### 2. justify-content屬性
`justify-content`屬性定義了項(xiàng)目在主軸上的對齊方式。
.box {
justify-content: flex-start | flex-end | center | space-between | space-around;
}
它可能取5個(gè)值余蟹，具體對齊方式與軸的方向有關(guān)卷胯。下面假設(shè)主軸為從左到右。
* flex-start（默認(rèn)值）：左對齊
* flex-end：右對齊
* center： 居中
* space-between：兩端對齊威酒，項(xiàng)目之間的間隔都相等窑睁。
* space-around：每個(gè)項(xiàng)目兩側(cè)的間隔相等挺峡。所以，項(xiàng)目之間的間隔比項(xiàng)目與邊框的間隔大一倍担钮。
### 3. align-items屬性
align-items屬性定義項(xiàng)目在交叉軸上如何對齊橱赠。
.box {
align-items: flex-start | flex-end | center | baseline | stretch;
}
它可能取5個(gè)值。具體的對齊方式與交叉軸的方向有關(guān)箫津，下面假設(shè)交叉軸從上到下狭姨。
* flex-start：交叉軸的起點(diǎn)對齊。
* flex-end：交叉軸的終點(diǎn)對齊苏遥。
* center：交叉軸的中點(diǎn)對齊饼拍。
* baseline: 項(xiàng)目的第一行文字的基線對齊。
* stretch（默認(rèn)值）：如果項(xiàng)目未設(shè)置高度或設(shè)為auto田炭，將占滿整個(gè)容器的高度师抄。
### 4. flex-wrap屬性
默認(rèn)情況下，項(xiàng)目都排在一條線（又稱"軸線"）上教硫。flex-wrap屬性定義叨吮，如果一條軸線排不下，如何換行瞬矩，以及它的換行方式茶鉴。
.box{
flex-wrap: nowrap | wrap | wrap-reverse;
}
它可能取三個(gè)值:
* nowrap（默認(rèn)）：不換行。
* wrap：換行景用，第一行在最上方蛤铜。
* wrap-reverse：換行，第一行在最下方丛肢。
### 5. align-content屬性
align-content屬性用于修改flex-wrap屬性的行為围肥。類似于align-item,但它不是設(shè)置彈性元素的對齊，而是設(shè)置各個(gè)行的對齊蜂怎。
如果彈性元素只有一行穆刻，該屬性不起作用。
.box {
align-content: flex-start | flex-end | center | space-between | space-around | stretch;
}
該屬性可能取6個(gè)值：
* flex-start：與交叉軸的起點(diǎn)對齊杠步。
* flex-end：與交叉軸的終點(diǎn)對齊氢伟。
* center：與交叉軸的中點(diǎn)對齊。
* space-between：與交叉軸兩端對齊幽歼，軸線之間的間隔平均分布朵锣。
* space-around：每根軸線兩側(cè)的間隔都相等。所以甸私，軸線之間的間隔比軸線與邊框的間隔大一倍诚些。
* stretch（默認(rèn)值）：軸線占滿整個(gè)交叉軸。
## 彈性子元素的屬性
以下6個(gè)屬性設(shè)置在彈性子元素上。
* order
* flex-grow
* flex-shrink
* flex-basis
* flex
* align-self
### 1. order屬性
order屬性定義項(xiàng)目的排列順序诬烹。數(shù)值越小砸烦，排列越靠前，默認(rèn)為0绞吁。
.item {
order: <integer>;
}
### 2. flex屬性
#### 1. flex-grow屬性
flex-grow屬性賦予子元素在必要時(shí)伸展的能力幢痘，可指定一個(gè)不帶單位的數(shù)值，作為父容器剩余空間的比例家破，它表示子元素在flex容器中可以分配多少可用的空間颜说。
如果所有聲明了flex-grow的子元素都指定flex-grow為1，那么父容器剩余的空間將會(huì)平均的分配到這些子元素上汰聋。如果其中一個(gè)flex-grow指定為2脑沿，那么容器將會(huì)試圖為其分配一個(gè)空間，這個(gè)空間2倍于那些flex-grow為1的子元素马僻。
需要注意的是，我們說的剩余空間注服，是指除子元素內(nèi)容以外的父容器可用空間韭邓，另外，父容器并不保證所有情況下都能均勻分配溶弟，但至少它會(huì)這樣嘗試女淑。
flex-grow的值不能為負(fù)。
每個(gè)彈性子元素沒有設(shè)置寬度辜御，是自由伸展的鸭你，那么子元素的寬度就是本身flex item1所占的寬度。如eg.1
容器寬度：200
彈性子元素寬度：100
html:
<div class="flex-container">
<div class="flex-item" style="flex-grow: 1;">flex item</div>
<div class="flex-item" style="flex-grow: 2;">flex item</div>
<div class="flex-item" style="flex-grow: 1;">flex item</div>
</div>
如果每個(gè)彈性子元素設(shè)置寬度100擒权，那么子元素的寬度就是100袱巨，除去子元素后的部分按flex-grow比例進(jìn)行分配。
#### 2. flex-shrink屬性
flex-shrink屬性表示一個(gè)子元素在必要時(shí)是否收縮自己來適應(yīng)當(dāng)前的Flexbox碳抄，默認(rèn)值是1愉老。
注意：flex-shrink不能為負(fù)值。
flex-shrink適合使用在固定尺寸的子元素上剖效，默認(rèn)情況下嫉入，固定大小的子元素并非始終保持設(shè)定的值，比如在父容器太小時(shí)璧尸，就會(huì)壓縮子元素來適應(yīng)咒林，如果我們不想這些子元素被壓縮，就可以使用flex-shrink爷光，并設(shè)置其值為0垫竞。
eg1：
```html
<div class="flex-container">
<div class="flex-item" style="flex-shrink: 2;">flex item1</div>
<div class="flex-item" style="flex-shrink: 1;">flex item2</div>
<div class="flex-item" style="">flex item3</div>
</div>
容器寬度：200
彈性子元素寬度：100
收縮比例為：2：1：1
所以：1003-200=100，超出100蛀序，按比例劃分件甥，就是item1被移除溢出量=100/(2+1+1) * 2=50;item2被移除溢出量=100/(2+1+1) * 1;item3被溢出量=100/(2+1+1)1捌议。
eg2：
如果其中有一個(gè)元素設(shè)置了flex-shrink: 0;則其寬度不會(huì)收縮，其他部分按比例收縮即可引有。
3. flex-basis 屬性
flex-basis屬性告訴父容器瓣颅，在剩余空間被分配之前先定義子元素的默認(rèn)尺寸，可以指定為百分比或rem等長度單位或者auto關(guān)鍵字譬正。
如果設(shè)置為0宫补，那么父容器分配分配之前，對每個(gè)子元素的默認(rèn)尺寸都視之為0曾我，剩余空間也就是父容器的全部空間粉怕，其結(jié)果是，直接按照flex-grow值的比例分配子元素整體的大惺愠病贫贝；
如果設(shè)置為auto，那么父容器會(huì)將每個(gè)子元素中的內(nèi)容作為子元素默認(rèn)尺寸蛉谜，然后再計(jì)算剩余空間稚晚，最后把剩余空間按照flex-grow值的比例平均分配到子元素除內(nèi)容以外的空間，也就是”padding”型诚。
[圖片上傳失敗...(image-732e68-1524620541028)]
4. flex屬性
flex屬性是flex-grow, flex-shrink 和 flex-basis的簡寫客燕，默認(rèn)值為0 1 auto。后兩個(gè)屬性可選。
.item {
flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
}
該屬性有兩個(gè)快捷值：auto (1 1 auto) 和 none (0 0 auto)。
建議優(yōu)先使用這個(gè)屬性声登，而不是單獨(dú)寫三個(gè)分離的屬性，因?yàn)闉g覽器會(huì)推算相關(guān)值傍妒。
3. align-self屬性
align-self屬性允許單個(gè)項(xiàng)目有與其他項(xiàng)目不一樣的對齊方式，可覆蓋align-items屬性摸柄。默認(rèn)值為auto拍顷，表示繼承父元素的align-items屬性，如果沒有父元素塘幅，則等同于stretch昔案。
.item {
align-self: auto | flex-start | flex-end | center | baseline | stretch;
}
屬性值各個(gè)值解釋 - 自己的解釋
一般大家都會(huì)看到好多個(gè)屬性的取值中都有
flex-start、flex-end电媳、center踏揣、space-between、space-around這幾個(gè)取值范圍匾乓。那么下面就詳細(xì)解釋一下每個(gè)取值的含義捞稿。因?yàn)橹翱偸歉鱾€(gè)屬性值組合起來用的，很是混亂。
剛開始看阮一峰老師的講解時(shí)娱局，有個(gè)地方自己理解錯(cuò)了彰亥， 所以特意自己截圖來說明一下∷テ耄可能有小伙伴和我一樣也理解錯(cuò)了任斋。
比如上圖，只是看這個(gè)圖耻涛，我就會(huì)認(rèn)為废酷，設(shè)置為center屬性就會(huì)展示成上圖中center的這個(gè)樣子，其實(shí)這樣的理解是有一點(diǎn)點(diǎn)偏差的抹缕。
以justify-content 屬性為例進(jìn)行說明澈蟆。
justify-content：內(nèi)容對齊（justify-content）屬性應(yīng)用在彈性容器上，把彈性項(xiàng)沿著彈性容器的主軸線（main axis）對齊卓研。
1. flex-start
彈性項(xiàng)目向行頭緊挨著填充趴俘。這個(gè)是默認(rèn)值。第一個(gè)彈性項(xiàng)的main-start外邊距邊線被放置在該行的main-start邊線奏赘，而后續(xù)彈性項(xiàng)依次平齊擺放寥闪。也就是左對齊。
---w3c的解釋
左對齊的意思就是說志珍，從main-start邊線，一個(gè)緊挨著一個(gè)向右排列垛叨，中間沒有空隙的伦糯。例如，下圖：
2. flex-end
彈性項(xiàng)目向行尾緊挨著填充嗽元。第一個(gè)彈性項(xiàng)的main-end外邊距邊線被放置在該行的main-end邊線敛纲，而后續(xù)彈性項(xiàng)依次平齊擺放。
---w3c的解釋
如下圖所示：
3. center
彈性項(xiàng)目居中緊挨著填充剂癌。（如果剩余的自由空間是負(fù)的淤翔，則彈性項(xiàng)目將在兩個(gè)方向上同時(shí)溢出）。
---w3c的解釋
如下圖所示：
]
4. space-between
彈性項(xiàng)目平均分布在該行上佩谷。如果剩余空間為負(fù)或者只有一個(gè)彈性項(xiàng)旁壮，則該值等同于flex-start。否則谐檀，第1個(gè)彈性項(xiàng)的外邊距和行的main-start邊線對齊抡谐，而最后1個(gè)彈性項(xiàng)的外邊距和行的main-end邊線對齊，然后剩余的彈性項(xiàng)分布在該行上桐猬，相鄰項(xiàng)目的間隔相等麦撵。
---w3c的解釋
如下圖所示：
5. space-around
彈性項(xiàng)目平均分布在該行上，兩邊留有一半的間隔空間。如果剩余空間為負(fù)或者只有一個(gè)彈性項(xiàng)免胃，則該值等同于center音五。否則，彈性項(xiàng)目沿該行分布羔沙，且彼此間隔相等（比如是20px）躺涝，同時(shí)首尾兩邊和彈性容器之間留有一半的間隔（1/2*20px=10px）。
如下圖：
所以最上面?zhèn)€那個(gè)綜合的圖片中撬碟，其實(shí)是為了看起來更加方便诞挨，是給每個(gè)子元素添加了外邊距，外邊距算作每個(gè)元素的樣式呢蛤。所以看起來是上面?zhèn)€綜合圖的樣子惶傻。
參考
友情提示：初學(xué)者不易記全所有的屬性和值的左右，鼠標(biāo)放在屬性名上即可顯示相應(yīng)屬性的作用其障。
