16-14 小标题自适应经典flex布局实现

推荐文章
Flex 布局教程：语法篇 http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html
Flex 布局教程：实例篇http://www.ruanyifeng.com/blog/2015/07/flex-examples.html

flex属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选。
flex:等分，缩放，占位空间

1.横线要是自适应的
2.text文章周围要是空的，避免背景有透明度，后面有横线遮不住的问题

<div class="title">
    <div class="line"></div>
     <div class="text">优惠信息</div>
     <div class="line"></div>        //line此时使用的是div，用span在安卓下布局会有一些问题
</div>  

less：

.title{
        display: flex;
        width: 80%;
        margin: 28px auto 24px auto;
        .line{
          flex: 1;
          position: relative;
          top: -6px;
          border-bottom: 1px solid rgba(255, 255, 255, 0.2);
        }
        .text{
          padding: 0 12px;
          font-weight: 700;
          font-size: 14px;
        }
      }