提示： 當期內容不充實， 修改后再來看吧
以下稱：彈性子元素： 子元素， 彈性容器： 容器
彈性盒子的屬性
1. css彈性盒子模型規定了彈性元素如何在彈性容器內展示
2. 彈性元素默認顯示在彈性容器的同一行內（既：彈性盒子默認包含一行）
3. flex-direction: 規定子元素在容器內的排列順序：
row： 水平： 左對齊
row-reverse： 水平 逆序右對齊
column： 垂直： 上對齊
column-reverse： 垂直 逆序下對齊
4. justify-content: 規定子元素在容器內水平方向上的對齊方式
flex-start： 默認 左對齊
flex-end: 右對齊
center： 居中對齊
space-between： 均勻分布對齊 貼合容器！！！
space-around： 均勻分布對齊 均勻距離容器！！！
5. align-items規定子元素在容器內縱軸上的對齊方式
flex-start： 彈性盒子元素的側軸（縱軸）起始位置的邊界緊靠住該行的側軸起始邊界。
flex-end： 彈性盒子元素的側軸（縱軸）起始位置的邊界緊靠住該行的側軸結束邊界。
center： 彈性盒子元素在該行的側軸（縱軸）上居中對齊
baseline： 如彈性盒子元素的行內軸與側軸為同一條，則該值與'flex-start'等效。其它情況下，
該值將參與基線對齊
stretch： 如果指定側軸大小的屬性值為'auto'，則其值會使項目的邊距盒的尺寸盡可能接近所在行的尺寸，
但同時會遵照'min/max-width/height'屬性的限制
6. flex-wrap： 規定子元素在容器內換行方式 （wrap： 外套，包裝的意思。nowrap不要外套，就一行，wrap： 要外套， 允許換行，包着子元素）
nowrap： 默認 不換行
wrap: 換行
wrap-reverse： 換行 逆序
7. align-content： 規定子元素在容器中垂直方向上的對齊方式， 和justify-content相反
（前提： 容器內允許換行，既存在多行子元素）
flex-start： 默認 上對齊
flex-end: 下對齊
center： 居中對齊
space-between： 均勻分布對齊 貼合容器上下！！！
space-around： 均勻分布對齊 均勻距離容器左右！！！
默認特性：
1. 彈性元素間默認沒有間隙
2. 彈性容器默認不改變彈性項目寬度
3. 彈性布局默認左對齊
4. flex-grow： 1， 則該項目默認拉伸占據該行剩余寬度。 默認值為0， 不拉伸。
5. 彈性布局默認改變項目的高度， 如果沒有指定項目的高度， 則默認充滿項目高。（若彈性b元素改變了容器寬度， 則彈性a元素也將被拉伸）
6. align-self指定了單個彈性元素在縱軸上的對其方式， 如果一個個設置該屬性太麻煩， 則可以設置容器的align-items， 所有單個元素的align-self將會繼承這個值。
彈性子元素屬性
1. order： 規定子元素在容器中的排列順序， 用數值表示，越小越靠前， 可謂負數
2. margin: 自動獲取盒子內水平和垂直方向的剩余空間，並設置最完美的距離。
注： 設置margin：auto可是使子元素在容器內完美居中， 解決了多年來的元素居中問題
3. align-self設置元素自身在容器內縱軸方向上的對齊方式
flex-start： 默認 上對齊
flex-end: 下對齊
center： 居中對齊
basline： 如彈性盒子元素的行內軸與側軸為同一條，則該值與'flex-start'等效。其它情況下，該值將參與基線對齊
strench： 拉伸自身和容器高度相同
4. flex: 規定子元素在容器內如何占據空間，類似於bootstrap的柵格布局，相當於百分比的意思
數值： 例如有三個子元素 flex值分別為2 1 1 ， 則相當於witdh: 50% 25% 25%
注意： 請使用默認值： auto： 自動拉伸； none：不拉伸
demo： 做一個類似淘寶移動端商品列表項(自如網面試題題)：
需求：
HTML：
<div class="container"> <div class="left"> <div class="lcontent"> content </div> </div> <div class="right"> <p class="title"> titltitletitletitletitlee titltitletitletitletitlee titltitletitletitletitlee </p> <p class="content"> content </p> <p class="time"> 2018-08-21 10:30 </p> </div> </div>
CSS：
.container {
display: flex;
display: -webkit-flex;
border: 1px solid #ddd;
width: 100%;
height: auto;
flex-direction: row;
justify-content: space-between;
-webkit-justify-content: space-around;
align-content: space-around;
-webkit-align-content: space-around;
}
.container .left,
.container .right{
// flex: 1;
width: 40%;
margin: 10;
}
.container .left {
display: flex;
border: 1px solid #eee;
background-color: #eee;
border-radius: 15px;
}
.container .left .lcontent {
margin: auto;
}
.container .right .title {
font-weight: bolder;
}
.container .right .content {
color: #ddd;
font-size: 14px;
}
.container .right .time {
font-size: 12px;
}
效果：
* flex-basis和flex-grow的demo
