小标题自适应的经典布局--flex

实现如图所以的小标题布局。

实现的注意点：

1.两边的线是自适应的，不能写死。如果屏幕大，则留白超级大。否则，线可能就挨着边了。

2.因为后面的北京是图片，所以不能用一个div盖在线上。

我的实现的方法：

<div class="title">
  <div class="line"></div>
  <div class="text">优惠信息</div>
  <div class="line"></div>
</div>

css:

.title
  padding: 0 36px
  display: flex
  .text
    font-size: 14px
    padding: 0 12px
  .line
    flex: 1
    position: relative
    top: -6px
    border-bottom: 1px solid rgba(255,255,255,0.2)

其中title是根据ui设计稿，不设置宽度，利用padding实现左右的距离。flex布局实现，line的自适应。