使用css弹性盒子模型
提示： 当期内容不充实， 修改后再来看吧
以下称：弹性子元素： 子元素， 弹性容器： 容器
弹性盒子的属性
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
