flex布局实现小标题

html代码：

 <div class="title">
     <div class="line"></div>
     <div class="text">这是一条小标题</div>
     <div class="line"></div>
 </div>

css代码：(采用了stylus的书写格式）

.title
   display: flex
   width: 80%
   margin: 30px auto 24px auto
   .line
      flex: 1
      position: relative
      top: -6px
      border-bottom: 1px solid rgba(255, 255, 255, .2)
    .text
      padding: 0 12px
      font-size: 14px

页面效果

这种布局的巧妙之处在于，横线可以根据屏幕宽度，标题的字数（影响text的长度）来自适应大小；