一、什么是Flex布局崭篡？

Flex是Flexible Box的縮寫(xiě)浆竭，意為"彈性布局"浸须，用來(lái)為盒狀模型提供最大的靈活性。
任何一個(gè)容器都可以指定為Flex布局邦泄。

Flex之前 我們用什么布局

主要使用

• normal flow （正常流删窒，也叫文檔流）
• float + clear
• position relative + absolute
• display inline-block
• 負(fù) margin

Flex 來(lái)了

一種新的布局方式——Flex布局

1.塊級(jí)布局側(cè)重垂直方向、行內(nèi)布局側(cè)重水平方向顺囊，flex 布局是與方向無(wú)關(guān)的肌索。
2.flex 布局可以實(shí)現(xiàn)空間自動(dòng)分配、自動(dòng)對(duì)齊 （flexible：彈性特碳、靈活）驶社。
3.flex 適用于簡(jiǎn)單的線性布局，更復(fù)雜的布局要交給 grid 布局（還沒(méi)發(fā)布）测萎。

二、基本概念

采用Flex布局的元素届巩，稱為Flex容器（flex container）硅瞧，簡(jiǎn)稱"容器"。它的所有子元素自動(dòng)成為容器成員恕汇，稱為Flex項(xiàng)目（flex item）腕唧，簡(jiǎn)稱"項(xiàng)目"。

三瘾英、flex container 的屬性

flex-direction屬性

flex-direction屬性決定主軸的方向（即項(xiàng)目的排列方向）枣接。
它可能有4個(gè)值

• row( 默認(rèn)值)：主軸為水平方向，從左向右排列缺谴。

.box{
    background:#ccc;
    display:flex;
    flex-direction:row;
  }

• row-reverse：主軸為水平方向但惶，從右向左排列。

.box{
  background:#ccc;
  display:flex;
  flex-direction:row-reverse;
}

• column：主軸為垂直方向，從上到下排列膀曾。

.box{
  background:#ccc;
  display:flex;
  flex-direction:column;
}

• column-reverse：主軸為垂直方向县爬，從下到上排列。

.box{
  background:#ccc;
  display:flex;
  flex-direction:column-reverse;
}

flex-wrap 屬性

默認(rèn)情況下添谊，項(xiàng)目都排在一條線（又稱"軸線"）上财喳。flex-wrap屬性定義，如果一條軸線排不下斩狱，如何換行耳高。
它可能取3個(gè)值
1.nowrap（默認(rèn)值）：不換行。

.box{
  background:#ccc;
  display:flex;
  flex-wrap:nowrap;
}

2.wrap：換行所踊。

.box{
  background:#ccc;
  display:flex;
  flex-direction:column;
  flex-wrap:wrap;
  height:300px;
}

3.wrap-reverse：換行泌枪，第一行在下方。

.box{
  background:#ccc;
  display:flex;
  flex-wrap:wrap-reverse;
}

flex-flow屬性

flex-flow屬性是flex-direction屬性和flex-wrap屬性的簡(jiǎn)寫(xiě)形式污筷，默認(rèn)值為row nowrap工闺。

justify-content屬性

justify-content屬性定義了項(xiàng)目在主軸上的對(duì)齊方式。
它可能有5個(gè)值

• flex-start（默認(rèn)值）：左對(duì)齊瓣蛀。

.box{
  background:#ccc;
  display:flex;
  justify-content:flex-start;
}

• flex-end：右對(duì)齊陆蟆。

.box{
  background:#ccc;
  display:flex;
  justify-content:flex-end;
}

• center：居中。

.box{
  background:#ccc;
  display:flex;
  justify-content:center;
}

• space-between：兩端對(duì)齊惋增，項(xiàng)目之間的間隔都相等叠殷。

.box{
  background:#ccc;
  display:flex;
  justify-content:space-between;
}

• space-around：每個(gè)項(xiàng)目?jī)蓚?cè)的間隔相等。所以诈皿，項(xiàng)目之間的間隔比項(xiàng)目與邊框的間隔大一倍林束。

.box{
  background:#ccc;
  display:flex;
  justify-content:space-around;
}

align-items 屬性

align-items屬性定義了項(xiàng)目在側(cè)軸上的對(duì)齊方式。
它可能取5個(gè)值稽亏。

• stretch（默認(rèn)值）：如果項(xiàng)目未設(shè)置高度或設(shè)為auto壶冒，將占滿整個(gè)容器的高度。

.box{
  background:#ccc;
  display:flex;
  flex-wrap:wrap;
  flex-direction:row;
  align-items:stretch;
}

• flex-start：側(cè)軸的起點(diǎn)對(duì)齊截歉。

.box{
  background:#ccc;
  display:flex;
  flex-wrap:wrap;
  flex-direction:row;
  align-items:flex-start;
}

• flex-end：側(cè)軸的終點(diǎn)對(duì)齊胖腾。

.box{
  background:#ccc;
  display:flex;
  flex-wrap:wrap;
  flex-direction:row;
  align-items:flex-end;
}

• center：側(cè)軸的中點(diǎn)對(duì)齊。

.box{
  background:#ccc;
  display:flex;
  flex-wrap:wrap;
  flex-direction:row;
  align-items:center;
}

• baseline：項(xiàng)目的第一行文字的基線對(duì)齊瘪松。

align-content屬性

align-content屬性定義了多根軸線的對(duì)齊方式咸作。如果項(xiàng)目只有一根軸線，該屬性不起作用宵睦。

四记罚、flex item的屬性

flex-grow屬性

flex-grow屬性定義項(xiàng)目的放大比例，默認(rèn)為0壳嚎。
如果所有項(xiàng)目的flex-grow屬性都為1桐智，則它們將等分剩余空間（如果有的話）末早。如果一個(gè)項(xiàng)目的flex-grow屬性為2，其他項(xiàng)目都為1酵使，則前者占據(jù)的剩余空間將比其他項(xiàng)多一倍荐吉。

.box{
  background:#ccc;
  display:flex;
}
.child1{
  flex-grow:2;
}
.chlid2{
  flex-grow:1
}

flex-shrink屬性

flex-shrink屬性定義了項(xiàng)目的縮小比例，默認(rèn)為1口渔，即如果空間不足样屠，該項(xiàng)目將縮小。
如果所有項(xiàng)目的flex-shrink屬性都為1缺脉，當(dāng)空間不足時(shí)痪欲，都將等比例縮小。如果一個(gè)項(xiàng)目的flex-shrink屬性為0攻礼，其他項(xiàng)目都為1业踢，則空間不足時(shí)，前者不縮小礁扮。
負(fù)值對(duì)該屬性無(wú)效知举。

.box{
  background:#ccc;
  display:flex;
}
.child1{
  flex-shrink:0;
}

flex-basis屬性

flex-basis屬性定義了在分配多余空間之前，項(xiàng)目占據(jù)的主軸空間（main size）太伊。瀏覽器根據(jù)這個(gè)屬性雇锡，計(jì)算主軸是否有多余空間。它的默認(rèn)值為auto僚焦，即項(xiàng)目的本來(lái)大小锰提。
它可以設(shè)為跟width或height屬性一樣的值，則項(xiàng)目將占據(jù)固定空間芳悲。

flex屬性

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

.box{
  background:#ccc;
  display:flex;
}
.child1{
  flex:1 2 auto;
}

order屬性

order屬性定義項(xiàng)目的排列順序谅年。數(shù)值越小，排列越靠前肮韧，默認(rèn)為0踢故。

.box{
  background:#ccc;
  display:flex;
}
.child:nth-child(1){
  order:3;
}
.child:nth-child(2){
  order:2;
}
.child:nth-child(3){
  order:1;
}

align-self屬性

align-self屬性允許單個(gè)項(xiàng)目有與其他項(xiàng)目不一樣的對(duì)齊方式，可覆蓋align-items屬性惹苗。默認(rèn)值為auto，表示繼承父元素的align-items屬性耸峭，如果沒(méi)有父元素桩蓉，則等同于stretch。

.box{
  background:#ccc;
  display:flex;
  flex-direction:column;
  align-items:center;
}
.child1{
  align-self:flex-end;
}