使用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">
      -- :
    </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