一、什么是Flex布局？
Flex是Flexible Box的縮寫，意為"彈性布局"，用來為盒狀模型提供最大的靈活性。
任何一個容器都可以指定為Flex布局。
Flex之前 我們用什么布局
主要使用
- normal flow （正常流，也叫文檔流）
- float + clear
- position relative + absolute
- display inline-block
- 負 margin
Flex 來了
一種新的布局方式——Flex布局
1.塊級布局側重垂直方向、行內布局側重水平方向，flex 布局是與方向無關的。
2.flex 布局可以實現空間自動分配、自動對齊 （flexible：彈性、靈活）。
3.flex 適用于簡單的線性布局，更復雜的布局要交給 grid 布局（還沒發布）。
二、基本概念
采用Flex布局的元素，稱為Flex容器（flex container），簡稱"容器"。它的所有子元素自動成為容器成員，稱為Flex項目（flex item），簡稱"項目"。
三、flex container 的屬性
flex-direction屬性
flex-direction屬性決定主軸的方向（即項目的排列方向）。
它可能有4個值
- row( 默認值)：主軸為水平方向，從左向右排列。
.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 屬性
默認情況下，項目都排在一條線（又稱"軸線"）上。flex-wrap屬性定義，如果一條軸線排不下，如何換行。
它可能取3個值
1.nowrap（默認值）：不換行。
.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屬性的簡寫形式，默認值為row nowrap。
justify-content屬性
justify-content屬性定義了項目在主軸上的對齊方式。
它可能有5個值
- 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:center;
}
- space-between：兩端對齊，項目之間的間隔都相等。
.box{
background:#ccc;
display:flex;
justify-content:space-between;
}
- space-around：每個項目兩側的間隔相等。所以，項目之間的間隔比項目與邊框的間隔大一倍。
.box{
background:#ccc;
display:flex;
justify-content:space-around;
}
align-items 屬性
align-items屬性定義了項目在側軸上的對齊方式。
它可能取5個值。
- stretch（默認值）：如果項目未設置高度或設為auto，將占滿整個容器的高度。
.box{
background:#ccc;
display:flex;
flex-wrap:wrap;
flex-direction:row;
align-items:stretch;
}
- flex-start：側軸的起點對齊。
.box{
background:#ccc;
display:flex;
flex-wrap:wrap;
flex-direction:row;
align-items:flex-start;
}
- flex-end：側軸的終點對齊。
.box{
background:#ccc;
display:flex;
flex-wrap:wrap;
flex-direction:row;
align-items:flex-end;
}
- center：側軸的中點對齊。
.box{
background:#ccc;
display:flex;
flex-wrap:wrap;
flex-direction:row;
align-items:center;
}
- baseline：項目的第一行文字的基線對齊。
align-content屬性
align-content屬性定義了多根軸線的對齊方式。如果項目只有一根軸線，該屬性不起作用。
四、flex item的屬性
flex-grow屬性
flex-grow屬性定義項目的放大比例，默認為0。
如果所有項目的flex-grow屬性都為1，則它們將等分剩余空間（如果有的話）。如果一個項目的flex-grow屬性為2，其他項目都為1，則前者占據的剩余空間將比其他項多一倍。
.box{
background:#ccc;
display:flex;
}
.child1{
flex-grow:2;
}
.chlid2{
flex-grow:1
}
flex-shrink屬性
flex-shrink屬性定義了項目的縮小比例，默認為1，即如果空間不足，該項目將縮小。
如果所有項目的flex-shrink屬性都為1，當空間不足時，都將等比例縮小。如果一個項目的flex-shrink屬性為0，其他項目都為1，則空間不足時，前者不縮小。
負值對該屬性無效。
.box{
background:#ccc;
display:flex;
}
.child1{
flex-shrink:0;
}
flex-basis屬性
flex-basis屬性定義了在分配多余空間之前，項目占據的主軸空間（main size）。瀏覽器根據這個屬性，計算主軸是否有多余空間。它的默認值為auto，即項目的本來大小。
它可以設為跟width或height屬性一樣的值，則項目將占據固定空間。
flex屬性
flex屬性是flex-grow, flex-shrink 和 flex-basis的簡寫，默認值為0 1 auto。后兩個屬性可選。
.box{
background:#ccc;
display:flex;
}
.child1{
flex:1 2 auto;
}
order屬性
order屬性定義項目的排列順序。數值越小，排列越靠前，默認為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屬性允許單個項目有與其他項目不一樣的對齊方式，可覆蓋align-items屬性。默認值為auto，表示繼承父元素的align-items屬性，如果沒有父元素，則等同于stretch。
.box{
background:#ccc;
display:flex;
flex-direction:column;
align-items:center;
}
.child1{
align-self:flex-end;
}
