摘要：簡介首先先聊一聊布局是什么布局表面上類似于塊布局，但是它缺少許多可以在塊布局中使用的更復(fù)雜的文本或文檔中心屬性，如浮動(dòng)和列，與此同時(shí)，它也獲得了一些簡單而強(qiáng)大的布局工具，它可以自動(dòng)調(diào)整，計(jì)算元素在容器空間的大小重要概念容器父元素顯示地設(shè)置項(xiàng)

首先先聊一聊Flex布局是什么？Flex布局表面上類似于塊布局，但是它缺少許多可以在塊布局中使用的更復(fù)雜的文本或文檔中心屬性，如浮動(dòng)和列，與此同時(shí)，它也獲得了一些簡單而強(qiáng)大的布局工具，它可以自動(dòng)調(diào)整，計(jì)算元素在容器空間的大小

Flex容器：父元素顯示地設(shè)置display:flex.
Flex項(xiàng)目：Flex容器內(nèi)的子項(xiàng)目

Flex容器中默認(rèn)存在一根水平的主軸（main axis）和豎直的交叉軸（cross axis），主軸開始的位置叫main start，結(jié)束位置叫main end，交叉軸開始的位置cross start結(jié)束的位置叫cross end，F(xiàn)lex容器中的項(xiàng)目將會(huì)沿著主軸或者交叉軸排布。比較重要的幾個(gè)概念介紹完，下面將會(huì)結(jié)合代碼介紹對(duì)應(yīng)的屬性

容器屬性主要有一下六個(gè)：

flex-direction

flex-wrap

flex-flow

justify-content

align-items

align-content

此屬性決定了主軸的排布方向，可以取四個(gè)值：

row(默認(rèn)值)：主軸沿水平方向從左至右排列

row-reverse：主軸沿水平方向從右至左排列

column：主軸沿垂直方向從上至下排列

column-reverse：主軸沿垂直方向從下至上排列

    
1
    
2
    
3

.container{
  display: flex;
  flex-direction: row;
}
.item{
  flex: 1;
  margin: 10px;
  background-color: #ccc;
}

當(dāng)flex-direction為row(默認(rèn)值)時(shí)：

當(dāng)flex-direction為column(默認(rèn)值)時(shí)：

此屬性決定了是否換行,可取三個(gè)值

nowrap(默認(rèn)值)：不換行

wrap：換行，第一行在上方

wrap-reverse：換行，第一行在下方

.container{
  display: flex;
  flex-wrap: nowrap;
  width: 400px;
}
.item{
  width: 200px;
  margin: 10px;
  background-color: #ccc;
}

當(dāng)flex-wrap屬性值取默認(rèn)的nowrap時(shí)，容器下面元素不會(huì)換行，且如果容器項(xiàng)目的寬度和超過容器，則容易項(xiàng)目寬度將會(huì)按照比例縮小

當(dāng)flex-wrap屬性值取默認(rèn)的wrap時(shí)，容器下面元素超過容器寬度就會(huì)換行顯示

flex-flow屬性是flex-direction和flex-wrap屬性的簡寫，默認(rèn)是 row nowrap

此屬性定義了主軸上的項(xiàng)目對(duì)齊方式，可取五個(gè)值：

flex-start(默認(rèn)值)：左對(duì)齊

flex-end：右對(duì)齊

center：水平居中

space-between：兩端對(duì)齊

space-around：項(xiàng)目兩側(cè)間距相等

.container{
  display: flex;
  justify-content: flex-start;
}

當(dāng)justify-content為flex-start時(shí)，主軸上的項(xiàng)目將靠左對(duì)齊

當(dāng)justify-content為flex-end時(shí)，主軸上的項(xiàng)目將靠右對(duì)齊

當(dāng)justify-content為flex-end時(shí)，主軸上的項(xiàng)目將居中對(duì)齊

當(dāng)justify-content為space-between時(shí)，主軸上的項(xiàng)目將兩端對(duì)齊，且項(xiàng)目之間的間距相等

當(dāng)justify-content為space-around時(shí)，項(xiàng)目兩側(cè)間距相等，項(xiàng)目之間的間距是側(cè)邊間距兩倍

align-items控制項(xiàng)目在豎直交叉軸上的對(duì)齊方式，可取五個(gè)值

flex-start：交叉軸起點(diǎn)對(duì)齊，即上對(duì)齊

flex-end：交叉軸終點(diǎn)對(duì)齊，即下對(duì)齊

center：交叉軸中間對(duì)齊，即豎直居中

baseline：沿基線對(duì)齊，基線與其交叉起始邊距邊緣之間最大距離的項(xiàng)目被放置在該行的交叉起始邊緣上（即基線以距離交叉軸距離最遠(yuǎn)的項(xiàng)目下邊界為準(zhǔn)）如果該項(xiàng)在必需的軸沒有基線，則從Flex項(xiàng)目的邊框中合成一個(gè)基線。

stretch(默認(rèn)值)：默認(rèn)值，若項(xiàng)目沒有設(shè)置高度時(shí)，項(xiàng)目高度會(huì)拉伸到預(yù)容器高度一致，存在高度設(shè)置，以設(shè)置屬性為準(zhǔn)

.container{
  display: flex;
  height: 400px;
  align-items: flex-start;
  border: 1px solid #000;
}
.item{
  width: 200px;
  height: 200px;
  margin: 0 10px;
  background-color: #ccc;
}

align-items取值為flex-start時(shí)，靠頂端對(duì)齊

align-items取值為flex-end時(shí)，靠底端對(duì)齊

align-items取值為flex-center時(shí)，豎直居中對(duì)齊

.container{
  display: flex;
  height: 400px;
  align-items: flex-start;
  border: 1px solid #000;
}
.item{
  width: 200px;
  height: 200px;
  margin: 0 10px;
  background-color: #ccc;
}
.item:nth-child(1) {
  height: 100px;
  line-height: 100px;
}

align-items取值為baseline時(shí)，基線對(duì)齊

此屬性用于多行排列的Flex容器，對(duì)單行容器不起作用，排列效果和align-items一樣，但是沒有baseline屬性，屬性取值：

flex-start：交叉軸起點(diǎn)對(duì)齊，即上對(duì)齊

flex-end：交叉軸終點(diǎn)對(duì)齊，即下對(duì)齊

center：交叉軸中間對(duì)齊，即豎直居中

stretch(默認(rèn)值)：項(xiàng)目高度與容器高度一樣

space-between：兩端對(duì)齊

space-around：項(xiàng)目兩側(cè)間距相等

 .container{
  display: flex;
  height: 800px;
  width: 400px;
  flex-wrap: wrap;
  align-content: flex-start;
  border: 1px solid #000;
}
.item{
  width: 200px;
  height: 200px;
  margin: 10px;
  background-color: #ccc;
}

這是align-content取值為flex-start時(shí)，由于取值和align-item表現(xiàn)一致，因此不再舉例其他屬性

此屬性可以定義項(xiàng)目的排列順序，數(shù)值越小的項(xiàng)目越靠前，默認(rèn)值為0

.container{
  display: flex;
  height: 400px;
  align-content: flex-start;
  border: 1px solid #000;
}
.item{
  width: 200px;
  height: 200px;
  margin: 10px;
  background-color: #ccc;
}
.item:nth-child(1) {
  order: 2;
}
.item:nth-child(2) {
  order: 1;
}
.item:nth-child(3) {
  order: -1;
}

這兩個(gè)屬性體現(xiàn)Flex布局的靈活性，它們定義了容器中項(xiàng)目的放大和縮小，flex-grow的默認(rèn)值為0，即默認(rèn)情況即使有剩余空間也不會(huì)自動(dòng)放大，flex-shrink默認(rèn)值為1，即在空間不足的情況下，容器項(xiàng)目會(huì)自動(dòng)縮小

.container{
  display: flex;
  width: 1000px;
  border: 1px solid #000;
}
.item{
  width: 200px;
  height: 200px;
  margin: 10px;
  background-color: #ccc;
}

默認(rèn)情況下容器寬度比項(xiàng)目寬度大時(shí)，flex-grow默認(rèn)值為0時(shí)，項(xiàng)目不會(huì)自動(dòng)拉伸

當(dāng)將flex-grow的值設(shè)置為1時(shí)，項(xiàng)目將會(huì)自動(dòng)拉伸占滿剩余空間

.item:nth-child(1) {
 flex-grow: 2;
}

如圖所示當(dāng)將容器的第一個(gè)項(xiàng)目flex-grow設(shè)為2時(shí)，其他項(xiàng)目flex-grow為1時(shí)，容器的剩余空間會(huì)按照flex-grow的比例將剩余的空間分配給各個(gè)項(xiàng)目

.container{
  display: flex;
  width: 500px;
  border: 1px solid #000;
}
.item{
  width: 200px;
  height: 200px;
  margin: 10px;
  background-color: #ccc;
}

當(dāng)flex-shrink的值為默認(rèn)1時(shí)，可以看到容器的項(xiàng)目寬度和比容器寬度要大時(shí)，會(huì)自動(dòng)進(jìn)行縮小，當(dāng)手動(dòng)設(shè)置flex-shrink為0時(shí)，將不會(huì)進(jìn)行縮小，如下圖

此屬性設(shè)置項(xiàng)目占據(jù)主軸的空間，當(dāng)不設(shè)置值時(shí)，默認(rèn)為auto，即項(xiàng)目本來的大小，也可以手動(dòng)設(shè)置占據(jù)主軸的空間大小

.container{
      display: flex;
      width: 500px;
      border: 1px solid #000;
    }
    .item{
      width: 100px;
      height: 200px;
      margin: 10px;
      background-color: #ccc;
    }
    .item:nth-child(1) {
      flex-basis: 150px;
    }

flex屬性是flex-grow、flex-shrink、flex-basis的簡寫形式，默認(rèn)值是0 1 auto，該屬性有兩個(gè)快捷值，auto(1 1 auto)，none(0 0 auto)

此屬性定義了單個(gè)項(xiàng)目的對(duì)齊方式，取值和表現(xiàn)和align-items基本一致，多了一個(gè)值auto即默認(rèn)值，表示繼承容器的align-items屬性，取值auto | flex-start | flex-end | center | baseline | stretch

.container{
  display: flex;
  width: 500px;
  border: 1px solid #000;
}
.item{
  width: 100px;
  height: 200px;
  margin: 10px;
  background-color: #ccc;
}
.item:nth-child(1) {
  height: 100px;
  align-self: center;
}

此處就舉了align-self: center時(shí)的例子，其余表現(xiàn)和align-items表現(xiàn)一致，只不過align-self作用在單個(gè)項(xiàng)目上