flex的兼容性在pc端還算闊以，但是在移動端，那就呵呵了。今天我們只是學習學習，忽略一些不重要的東西。
首先flex的使用需要有一個父容器，父容器中有幾個items.
父容器：container
屬性：
display:flex;/*flex塊級，inline-flex:行內快*/
justify-content:space-around;/*center:水平居中,flex-start:靠左;flex-end:靠右；space-between:兩邊的向兩邊靠，中間等分；space-around:完美的平均分配*/
align-items:stretch;/*center:垂直居中、flex-start：至頂、flex-end:至底、space-between、space-around*/
flex-direction: row;/*column從上向下的排列，column-reverse、row:從左到右，row-reverse:從右向左*/
flex-wrap:wrap;/*wrap多行顯示（父容器不夠顯示的時候，從上到下）、nowrap(當容器不夠寬的時候，子元素會平分父容器的寬或者高)、wrap-reverse:從下向上*/
/*flex-flow是flex-direction、flex-wrap的縮寫*/
這里給出一個簡單的demo:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<style>
.container{
width:600px;
height:400px;
border:1px solid #000;
display:flex;/*flex塊級，inline-flex:行內快*/
justify-content:space-around;/*center:水平居中,flex-start:靠左;flex-end:靠右；space-between:兩邊的向兩邊靠，中間等分；space-around:完美的平均分配*/
align-items:stretch;/*center:垂直居中、flex-start,至頂，flex-end:至底*,space-between、space-around*/
flex-direction: row;/*column從上向下的排列，column-reverse,,,,row:從左到右，row-reverse:從右向左*/
flex-wrap:wrap;/*wrap多行顯示（父容器不夠顯示的時候，從上到下）、nowrap(當容器不夠寬的時候，子元素會平分父容器的寬或者高)、wrap-reverse:從下向上*/
/*flex-flow是flex-direction、flex-wrap的縮寫*/
}
.box{
width:200px;
height:100px;
border:1px solid #000;
}
</style>
</head>
<body>
<div class="container">
<div class="box">這是中間的box1</div>
<div class="box">這是中間的box2</div>
</div>
</body>
</html>
子元素的屬性：
order：設置元素的順序
例如：我么想要將本來第二個元素排在第一，將排在第一的元素設置為第二。
我們可以設置他們的order值。
.box1{order:1;}
.box2{order:0;}
<div class="container">
<div class="box box1">這是中間的box1</div>
<div class="box box2">這是中間的box2</div>
</div>
flex:指定可伸縮長度的部件，是flex-shrink,flex-grow,flex-basis這三個屬性的縮寫。
他可以指定一個子元素的占據父元素的寬度或者高度的比例。（前提是在子元素還沒有占滿父級元素的情況下）
demo:
<style>
.container{
width:800px;
height:600px;
border:1px solid red;
display:flex;
align-items:center;
justify-content:center;
flex-direction:row;
flex-wrap:wrap;
}
.box{
width:200px;
height:200px;
border:1px solid blue;
}
.box1{
flex:2
}
</style>
</head>
<body>
<div class="container">
<div class= " box box1">1</div>
<div class="box box2">2</div>
<div class="box box3">3</div>
<div class="box box4">4</div>
</div>
</body>
最終效果如下：因為子元素占滿父級元素。
進一步驗證：
<style>
.container{
width:800px;
height:600px;
border:1px solid red;
display:flex;
align-items:center;
justify-content:center;
flex-direction:row;
flex-wrap:wrap;
}
.box{
width:200px;
height:200px;
border:1px solid blue;
}
.box1{
flex:2
}
</style>
</head>
<body>
<div class="container">
<div class= " box box1">1</div>
<div class="box box2">2</div>
</div>
</body>
很明顯的闊以看到，box1占據了600px寬度
align-self:用來單獨設置子元素的對齊方式（可將默認的對齊方式進行覆蓋）
例如:我們已經在父元素中設置了align-items:center.(將子元素設置為垂直居中顯示)
這個時候我們想單獨更改某個子元素的對齊方式，就可以使用align-self
<style>
.container{
width:800px;
height:600px;
border:1px solid red;
display:flex;
align-items:center;
justify-content:center;
flex-direction:row;
flex-wrap:wrap;
}
.box{
width:100px;
height:100px;
border:1px solid blue;
}
.box1{
flex:2
}
/* .box4{
align-self:flex-end;
} */
</style>
</head>
<body>
<div class="container">
<div class= " box box1">1</div>
<div class="box box2">2</div>
<div class="box box3">3</div>
<div class="box box4">4</div>
</div>
</body>
假如我們設置 box4：align-self:flex-end;呢？？？？？
.box4{
align-self:flex-end;
}
好了，已經改變了box4的對齊方式。
如果想兼容更多的瀏覽器，可以采用優雅降級的方式，例如sass-flex-mixin
參考：https://juejin.im/entry/5804638e67f3560058c6f914