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

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

Flex容器：父元素顯示地設置display:flex.
Flex項目：Flex容器內的子項目

Flex容器中默認存在一根水平的主軸（main axis）和豎直的交叉軸（cross axis），主軸開始的位置叫main start，結束位置叫main end，交叉軸開始的位置cross start結束的位置叫cross end，Flex容器中的項目將會沿著主軸或者交叉軸排布。比較重要的幾個概念介紹完，下面將會結合代碼介紹對應的屬性

容器屬性主要有一下六個：

flex-direction

flex-wrap

flex-flow

justify-content

align-items

align-content

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

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

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

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

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

    
1
    
2
    
3

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

當flex-direction為row(默認值)時：

當flex-direction為column(默認值)時：

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

nowrap(默認值)：不換行

wrap：換行，第一行在上方

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

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

當flex-wrap屬性值取默認的nowrap時，容器下面元素不會換行，且如果容器項目的寬度和超過容器，則容易項目寬度將會按照比例縮小

當flex-wrap屬性值取默認的wrap時，容器下面元素超過容器寬度就會換行顯示

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

此屬性定義了主軸上的項目對齊方式，可取五個值：

flex-start(默認值)：左對齊

flex-end：右對齊

center：水平居中

space-between：兩端對齊

space-around：項目兩側間距相等

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

當justify-content為flex-start時，主軸上的項目將靠左對齊

當justify-content為flex-end時，主軸上的項目將靠右對齊

當justify-content為flex-end時，主軸上的項目將居中對齊

當justify-content為space-between時，主軸上的項目將兩端對齊，且項目之間的間距相等

當justify-content為space-around時，項目兩側間距相等，項目之間的間距是側邊間距兩倍

align-items控制項目在豎直交叉軸上的對齊方式，可取五個值

flex-start：交叉軸起點對齊，即上對齊

flex-end：交叉軸終點對齊，即下對齊

center：交叉軸中間對齊，即豎直居中

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

stretch(默認值)：默認值，若項目沒有設置高度時，項目高度會拉伸到預容器高度一致，存在高度設置，以設置屬性為準

.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時，靠頂端對齊

align-items取值為flex-end時，靠底端對齊

align-items取值為flex-center時，豎直居中對齊

.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時，基線對齊

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

flex-start：交叉軸起點對齊，即上對齊

flex-end：交叉軸終點對齊，即下對齊

center：交叉軸中間對齊，即豎直居中

stretch(默認值)：項目高度與容器高度一樣

space-between：兩端對齊

space-around：項目兩側間距相等

 .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時，由于取值和align-item表現一致，因此不再舉例其他屬性

此屬性可以定義項目的排列順序，數值越小的項目越靠前，默認值為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;
}

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

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

默認情況下容器寬度比項目寬度大時，flex-grow默認值為0時，項目不會自動拉伸

當將flex-grow的值設置為1時，項目將會自動拉伸占滿剩余空間

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

如圖所示當將容器的第一個項目flex-grow設為2時，其他項目flex-grow為1時，容器的剩余空間會按照flex-grow的比例將剩余的空間分配給各個項目

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

當flex-shrink的值為默認1時，可以看到容器的項目寬度和比容器寬度要大時，會自動進行縮小，當手動設置flex-shrink為0時，將不會進行縮小，如下圖

此屬性設置項目占據主軸的空間，當不設置值時，默認為auto，即項目本來的大小，也可以手動設置占據主軸的空間大小

.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的簡寫形式，默認值是0 1 auto，該屬性有兩個快捷值，auto(1 1 auto)，none(0 0 auto)

此屬性定義了單個項目的對齊方式，取值和表現和align-items基本一致，多了一個值auto即默認值，表示繼承容器的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時的例子，其余表現和align-items表現一致，只不過align-self作用在單個項目上