flex实现中间文字，两边横线（1px）

学习了实现1px边框的实现方法。迫不及待的想要记录一下。顺便利用flex布局+1px边框实现一个 简单的中间文字，两边横线的组件。

演示

首先来看组件的需求：

• 左右两边的横线在移动端显示为1px。
• 中间内容部分可以随意传入文字内容。
• 同时不论文字的多少，两边的横线会随着内容增大而减小，直到内容占据的最大宽度为40%。
  
  根据以上需求，我们来制定步骤。

1px边框实现

mixin.styl

首先在mixin.styl中定义一个方法border-1px。此时宽度在drp为1.5的设备下显示的是1.5px。 在dpr为2的设备下显示的是2px。接下来要在base.styl中设置缩放才能真正实现1px。

no-wrap() //  文字超出省略
  text-overflow ellipsis
  overflow hidden
  white-space nowrap

border-1px($color) // 底部1px的边框，可传入颜色
  position: relative
  &::after 
    display block
    position absolute
    left 0
    bottom 0
    width 100%
    border-top 1px solid $color
    content ' '

base.styl

在base.styl下，查询设备dpr。再乘以缩放倍数使其达到1px的效果。

@media (-webkit-min-device-pixel-ratio: 1.5), (min-device-pixel-ratio: 1.5)
    .border-1px
        &::after
            -webkit-transform scaleY