Flex之前

在Flex之前我們用什么布局
主要使用：

• normal flow（正常流蒜魄，也叫文檔流）
• float+clear(浮動和清除浮動)
• plsition relative+absolute(相對定位和絕對定位)
• display inline-block（框的類型里的行內(nèi)塊級元素）
• 負margin(負的外邊距)

Flex來了

一種新的布局方式——Flex布局
1.塊級布局側(cè)重垂直方向,行內(nèi)布局側(cè)重水平方向帘不，flex布局是與方向無關(guān)的
2.flex布局可以實現(xiàn)空間自動分配捂齐，自動對齊（flexible:彈性，靈活）
3.flex適用于簡單的線性布局蚊惯，更復雜的布局要交給grid布局(還沒發(fā)布)

flex圖解

main size（主尺寸）
cross size（側(cè)尺寸）
main start (主尺寸起點)
main end（主尺寸終點）
cross start（側(cè)尺寸起點）
cross end（側(cè)尺寸終點）
flex item（flex項目）
flex container(flex容器)

flex container（flex容器）的六個屬性

flex-direction : 方向
值：

• row ：主尺寸水平方向侠鳄，起點在左端
  例：

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

起點左

• row-reverse：主尺寸水平方向起點在右端
  例：

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

起點右

-column：側(cè)尺寸垂直方向起點在上沿
例：

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

起點上

• colunm-reverse：側(cè)尺寸垂直方向起點在下沿
  例：

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

起點下

flex-wrap : 換行
值：

• nowrap：默認 不換行（所有元素都在一行）
  例：

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

不換行

• wrap：元素自動換行
  例：

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

自動換行

• wrap-reverse：元素自動換成逆序的換行
  例：

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

逆序換行

flex-flow : flex-direction和flex-wrap的簡寫
值：可取它們的任何值
例：

flex-flow:cloumn wrap;

justify-content : 主尺寸方向?qū)R方式
值：

• space-between：所有元素空間放在中間
  例：

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

空間放中間

• space-around：所有元素空間放在周圍
  例：

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

空間放周圍

• flex-start：所有元素往主尺寸起點靠
  例：

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

起點對齊

• flex-end：所有元素往主尺寸終點靠
  例：

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

終點對齊

• center：所有元素主尺寸居中
  例：

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

居中

align-items : 側(cè)尺寸對齊方式
值：

• stretch：伸展（所有元素一樣高）默認對齊
  例：

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

所有元素一樣高

• flex-start：所有元素往側(cè)尺寸起點靠
  例：

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

起點靠

• flex-end：所有元素往側(cè)尺寸終點靠
  例：

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

終點靠

• center：所有側(cè)尺寸元素居中
  例：

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

居中

• basline：項目的第一行文字基線對齊
  例：

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

align-content：多行多列內(nèi)容對齊方式
值：（與justify-content&align-items值一樣）
center：居中
flex-end：終點靠
flex-start：起點靠
space-around：空間放在周圍
space-between：空間放在中間
stretch：伸展（所有元素一樣高）默認對齊

flex item(flex項目)的六個屬性

flex-grow：增長比例（內(nèi)容過多時）
例：

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

增長比例

flex-shrink：收縮比例（空間不夠時）
例：

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

收縮比例

flex-basis：默認大小
在原來的基礎(chǔ)上一層不變

flex：grow&shrink&basis縮寫
例：

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

flex

order：順序(代替雙飛翼)
項目的排列順序异剥。數(shù)值越小愚屁，排列越靠前济竹，默認為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-items霎槐，允許單個項目有與其他項目不一樣的對齊方式送浊，默認值為auto，表示繼承父元素的align-items屬性.
例：

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

自身的對齊方式