本篇文章全部摘自阮一峰老師的Flex 布局教程。

之前我一直在用布局的傳統(tǒng)解決方案葱蝗，基于盒狀模型，依賴 display屬性 + position屬性 + float屬性陆馁。它對于那些特殊布局非常不方便合愈，比如佛析，垂直居中就不容易實現(xiàn)。最近在做百度前端技術(shù)學院的作業(yè)時發(fā)現(xiàn)很多人都在用Flex 布局捺萌，簡單幾行代碼就能實現(xiàn)特殊的布局膘茎，所以我找了點資料，開始學習彈性布局态坦。

彈性布局

一伞梯、Flex布局是什么帚屉？

Flex是Flexible Box的縮寫攻旦，意為"彈性布局"，用來為盒狀模型提供最大的靈活性掰邢。

• 任何一個容器都可以指定為Flex布局伟阔。

.box{
    display: flex;
}

• 行內(nèi)元素也可以使用Flex布局皱炉。

.box{
    display: inline-flex;
}

• Webkit內(nèi)核的瀏覽器狮鸭，必須加上-webkit前綴多搀。

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

注意：設為Flex布局以后康铭，子元素的float赌髓、clear和vertical-align屬性將失效锁蠕。因為一山不容二虎，float悯搔、clear和vertical-align屬性都是用來布局的屬性舌仍，一旦使用flex铸豁，原來這些古老的屬性不失效還留著干什么？

二平匈、基本概念

采用Flex布局的元素藏古，稱為Flex容器（flex container）拧晕，簡稱"容器"。它的所有子元素自動成為容器成員输玷，稱為Flex項目（flex item）靡馁，簡稱"項目"臭墨。

容器和項目

三箕慧、容器的屬性

以下6個屬性設置在容器上茴恰。

• flex-direction
• flex-wrap
• flex-flow
• justify-content
• align-items
• align-content

3.1 flex-direction屬性

flex-direction屬性決定主軸的方向（即項目的排列方向）往枣。

.box {
    flex-direction: row | row-reverse | column | column-reverse;
}

flex-direction屬性

• row（默認值）：主軸為水平方向分冈，起點在左端。
• row-reverse：主軸為水平方向集乔，起點在右端坡椒。
• column：主軸為垂直方向倔叼，起點在上沿。
• column-reverse：主軸為垂直方向渡嚣，起點在下沿肥印。

3.2 flex-wrap屬性

默認情況下深碱，項目都排在一條線（又稱"軸線"）上。flex-wrap屬性定義功咒，如果一條軸線排不下绞蹦，如何換行幽七。

flex-wrap屬性

.box{
    flex-wrap: nowrap | wrap | wrap-reverse;
}

它可能取三個值。
（1）nowrap（默認）：不換行猿挚。

3.3 flex-flow

flex-flow屬性是flex-direction屬性和flex-wrap屬性的簡寫形式，默認值為row nowrap

.box {
    flex-flow: <flex-direction> || <flex-wrap>;
}

3.4 justify-content屬性

justify-content屬性定義了項目在主軸上的對齊方式骤肛。各屬性演示地址

.box {
    justify-content: flex-start | flex-end | center | space-between | space-around;
}

• flex-start（默認值）：左對齊
• flex-end：右對齊
• center： 居中
• space-between：兩端對齊腋颠，項目之間的間隔都相等吓笙。
• space-around：每個項目兩側(cè)的間隔相等。所以尊搬，項目之間的間隔比項目與邊框的間隔大一倍土涝。

justify-content屬性.gif

3.5 align-items屬性

align-items屬性定義項目在交叉軸（垂直軸）上如何對齊但壮。

.box {
    align-items: flex-start | flex-end | center | baseline | stretch;
}

• flex-start：交叉軸的起點對齊。
• flex-end：交叉軸的終點對齊弹渔。
• center：交叉軸的中點對齊肢专。
• baseline: 項目的第一行文字的基線對齊您没。
• stretch（默認值）：如果項目未設置高度或設為auto，將占滿整個容器的高度欧募。

align-items屬性.gif

align-items屬性

3.6 align-content屬性

align-content屬性定義了多根軸線的對齊方式跟继。如果項目只有一根軸線舔糖，該屬性不起作用莺匠。

.box {
    align-content: flex-start | flex-end | center | space-between | space-around | stretch;
}

• flex-start：與交叉軸的起點對齊趣竣。
• flex-end：與交叉軸的終點對齊。
• center：與交叉軸的中點對齊卫袒。
• space-between：與交叉軸兩端對齊夕凝，軸線之間的間隔平均分布。
• space-around：每根軸線兩側(cè)的間隔都相等逮矛。所以泡徙，軸線之間的間隔比軸線與邊框的間隔大一倍膜蠢。
• stretch（默認值）：軸線占滿整個交叉軸挑围。

align-content屬性.gif

四杉辙、項目的屬性

以下6個屬性設置在項目上。

• order
• flex-grow
• flex-shrink
• flex-basis
• flex
• align-self

4.1 order屬性

order屬性定義項目的排列順序狂男。數(shù)值越小岖食，排列越靠前舞吭，默認為0。

.item { order: <integer>;}

order屬性

4.2 flex-grow屬性

flex-grow屬性定義項目的放大比例羡鸥，默認為0蔑穴，即如果存在剩余空間，也不放大惧浴。

.item { flex-grow: <number>; /* default 0 */}

flex-grow屬性

4.3 flex-shrink屬性

flex-shrink屬性定義了項目的縮小比例叙量，默認為1，即如果空間不足九串，該項目將縮小绞佩。

.item { flex-shrink: <number>; /* default 1 */}

flex-shrink屬性

4.4 flex-basis屬性

flex-basis屬性定義了在分配多余空間之前涯呻，項目占據(jù)的主軸空間（main size）凉驻。瀏覽器根據(jù)這個屬性，計算主軸是否有多余空間复罐。它的默認值為auto涝登，即項目的本來大小。

.item { flex-basis: <length> | auto; /* default auto */}

它可以設為跟width或height屬性一樣的值（比如350px）效诅，則項目將占據(jù)固定空間胀滚。

4.5 flex屬性

flex屬性是flex-grow,flex-shrink和 flex-basis的簡寫，默認值為0 1 auto乱投。后兩個屬性可選咽笼。

.item { flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]}

該屬性有兩個快捷值：auto(1 1 auto) 和 none (0 0 auto)。建議優(yōu)先使用這個屬性戚炫，而不是單獨寫三個分離的屬性剑刑，因為瀏覽器會推算相關(guān)值。

4.6 align-self屬性

align-self屬性允許單個項目有與其他項目不一樣的對齊方式嘹悼，可覆蓋align-items屬性叛甫。默認值為auto，表示繼承父元素的align-items屬性杨伙，如果沒有父元素其监，則等同于stretch。

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

五米死、Flex布局實例鏈接

5.1 骰子的布局

骰子的布局

5.2 網(wǎng)格布局

網(wǎng)格布局

5.3 圣杯布局

圣杯布局

5.4 輸入框的布局

輸入框的布局

5.5 懸掛式布局

懸掛式布局

5.6 固定的底欄

固定的底欄

5.7 流式布局

流式布局