一、Flex布局是什么？

Flex是Flexible Box的縮寫，意為"彈性布局"，任何一個(gè)容器都可以指定為Flex布局。開啟彈性盒子代碼為dislpay:flex;注意的是，設(shè)為flex布局以后，子元素的float clear vertical-align屬性將失效。

二、基本概念

開啟彈性盒子的元素，稱為flex容器，簡稱“容器”，它的所有子元素稱為flex項(xiàng)目，簡稱“項(xiàng)目”。

flex彈性布局

容器默認(rèn)存在兩根軸：水平的主軸（main axis）和垂直的交叉軸（cross axis）

把一個(gè)元素設(shè)置為伸縮容器默認(rèn)的效果是：

1. 所有項(xiàng)目元素依次從左至右，在主軸上排列
2. 所有項(xiàng)目默認(rèn)高度充滿容器
3. 所有項(xiàng)目在沒有設(shè)置寬度的情況下，并且加起來寬度沒有超過容器的情況，元素是內(nèi)容撐開寬度
4. 當(dāng)項(xiàng)目總寬度沒有超出容器，元素設(shè)置寬度后，會(huì)保持設(shè)置的寬度
5. 當(dāng)項(xiàng)目總寬度超出容器，在可以被壓縮的情況下，所有元素會(huì)被等比壓縮。

三、容器的屬性

以下6個(gè)屬性設(shè)置在容器上

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

flex-direction屬性

flex-direction屬性決定主軸的方向，有四個(gè)值可以設(shè)置，flex-direction：row（默認(rèn)值） | row-reverse | column | column-reverse

.box{
    flex-direction:row ; /*默認(rèn)主軸為水平方向從左到右*/
    flex-direction:row-reverse;/*主軸為水平方向，從右至左*/
    flex-direction:column;/*主軸和側(cè)軸交換位置，主軸為垂直方向，從上至下*/
    flex-direction:column-reverse;/*主軸為垂直方向，從下至上*/
}

flex-direction設(shè)置的4個(gè)值

flex-wrap屬性

默認(rèn)情況下，項(xiàng)目都排在一條線上。flex-wrap控制項(xiàng)目超出容器后換行，換行以后，容器被平分成了兩半。換行后每一行互不影響，主軸跟側(cè)軸都出現(xiàn)了單行的富余空間

.box{
    flex-wrap: nowrap;/*默認(rèn)不換行*/
    flex-wrap: wrap;/*項(xiàng)目超出換行*/
    flex-wrap: wrap-reverse;/*項(xiàng)目換行并且調(diào)換側(cè)軸的方向*/
}

flex-wrap：nowrap默認(rèn)不換行

flex-wrap:wrap項(xiàng)目超出換行

flex-wrap:wrap-reverse項(xiàng)目換行并且調(diào)換側(cè)軸方向

flex-flow屬性

flex-flow是flex-wrap和flex-direction的簡寫形式，默認(rèn)值為row nowrap。

.box{
    flex-wrap: wrap;
    flex-direction: row-reverse;
    /*以上兩種方式可簡寫為*/
    flex-flow:wrap  row-reverse;
}

justify-content屬性

justify-content定義了項(xiàng)目在主軸上的對(duì)齊方式，有六個(gè)值可以設(shè)置，justify-content：flex-start | flex-end | center | space-around | space-between | space-evenly

justify-content:flex-start; 效果圖

justify-content:flex-end; 效果圖

justify-content:center; 效果圖

justify-content:space-around; 效果圖

space-between：項(xiàng)目包含富余空間

justify-content:space-between; 效果圖

justify-content:space-evenly; 效果圖

align-items屬性

align-items屬性定義項(xiàng)目在交叉軸（側(cè)軸）上如何對(duì)齊，有五個(gè)值可以設(shè)置，align-items：flex-start | flex-end | center | baseline | stretch

.box{
    align-items:flex-start;/*側(cè)軸的起點(diǎn)對(duì)齊*/
    align-items:flex-end;/*側(cè)軸的終點(diǎn)對(duì)齊*/
    align-items:center;/*側(cè)軸的中點(diǎn)對(duì)齊*/
    align-items:baseline;/*項(xiàng)目在側(cè)軸的基線對(duì)齊*/
    align-items:stretch;/*如果項(xiàng)目未設(shè)置高度或設(shè)為auto，將占滿整個(gè)容器的高度（默認(rèn)）*/
}

align-items 效果圖

align-content屬性

align-content屬性換行后側(cè)軸上整體富余空間分配，有六個(gè)值可以設(shè)置align-content:flex-start | flex-end | center | space-around | space-between | space-evenly | stretch（默認(rèn)值） .
注意：在項(xiàng)目換行后，align-content的優(yōu)先級(jí)要高于align-items。

.box{
    align-content:flex-start; /*與側(cè)軸的起點(diǎn)對(duì)齊*/
    align-content:flex-end; /*與側(cè)軸的終點(diǎn)對(duì)齊*/
    align-content:center; /*與側(cè)軸的中點(diǎn)對(duì)齊*/
    align-content:space-around; /*每根軸線兩側(cè)的間隔都相等，所以軸線之間的間隔比軸線與邊框的間隔大一倍*/
    align-content:space-between; /*與側(cè)軸兩端對(duì)齊，軸線之間的間隔平均分布*/
    align-content:space-evenly; /*所有的項(xiàng)目間隙都相等*/
    align-content:stretch; /*默認(rèn)值，軸線占滿整個(gè)交叉軸*/
}

align-content 效果圖

四、項(xiàng)目的屬性

以下6個(gè)屬性設(shè)置在項(xiàng)目上

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

order屬性

order屬性，決定項(xiàng)目顯示的順序，數(shù)值越小，排列越靠前，默認(rèn)為0.

.item{
    order:1;
}

flex-grow屬性

flex-grow屬性定義項(xiàng)目的放大比例，默認(rèn)為0，即如果存在剩余空間，也不放大

.item{
    flex-grow:1;/*默認(rèn)為0*/
}

flex-grow 效果圖

如果所有項(xiàng)目的flex-grow屬性都為1，則它們將等分剩余空間（如果有的話）。如果一個(gè)項(xiàng)目的flex-grow屬性為2，其他項(xiàng)目都為1，則前者占據(jù)的剩余空間將比其他項(xiàng)多一倍

flex-shrink屬性

flex-shrink控制收縮率，flex的項(xiàng)目超出容器后，會(huì)對(duì)項(xiàng)目進(jìn)行收縮，每一個(gè)項(xiàng)目收縮的大小都和他自身的收縮率相關(guān)，默認(rèn)收縮率是1。

公式：超出容器的值*（收縮因子 * 當(dāng)前項(xiàng)目的寬度 / （收縮因子 * 當(dāng)前項(xiàng)目的寬度 + ...所有的項(xiàng)目））

.item{
    flex-shrink:<number>;/*默認(rèn)為1*/
}

flex-shrink 效果圖

如果所有項(xiàng)目的flex-shrink屬性都為1，當(dāng)空間不足時(shí)，都將等比例縮小。如果一個(gè)項(xiàng)目的flex-shrink屬性為0，其他項(xiàng)目都為1，則空間不足時(shí)，前者不縮小。
負(fù)值對(duì)該屬性無效。

flex-basis屬性

flex-basis屬性定義了在分配多余空間之前，項(xiàng)目占據(jù)的主軸空間（main size）。瀏覽器根據(jù)這個(gè)屬性，計(jì)算主軸是否有多余空間。它的默認(rèn)值為auto，即項(xiàng)目的本來大小。

.item{
    flex-basis:<length>  |  auto;/*默認(rèn)為1*/
}

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

flex屬性

flex屬性是flex-grow, flex-shrink 和 flex-basis的簡寫，默認(rèn)值為0 1 auto。后兩個(gè)屬性可選。

.item{
    /*以下這段代碼表示
    flex-grow:2; flex-shrink:1;flex-basis:100px;
    */
    flex:2  1  100px;
}

align-self屬性

align-self屬性允許單個(gè)項(xiàng)目有與其他項(xiàng)目不一樣的對(duì)齊方式，默認(rèn)值為auto，該屬性可能取6個(gè)值，此屬性的可選值與容器align-items屬性完全一致，如果兩者同時(shí)設(shè)置則以項(xiàng)目align-self屬性為準(zhǔn)。

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

• flex-start：起始端對(duì)齊
  align-self:flex-start; 效果圖

• flex-end：末尾端對(duì)齊
  align-self:flex-end; 效果圖

• center：居中對(duì)齊
  align-self:center; 效果圖

• stretch：拉伸對(duì)齊
  align-self:stretch; 效果圖

• baseline :基線對(duì)齊
  align-self:baseline; 效果圖

以上就是flex布局的全部屬性，一共12個(gè)，父容器，子項(xiàng)目各6個(gè)。大家可以玩玩這個(gè)青蛙游戲。一個(gè)學(xué)flex布局的游戲

原文鏈接來源
Flex 布局教程：語法篇
一勞永逸的搞定 flex 布局