vue系列之flex经典案例

 

案例分析：

1、中间文字居中

2、文字俩边有横线

横线无法固定宽度，因为在大屏手机上，容易出现Bug，宽度不够，俩边会出现大量空隙

解决办法，使用flex布局（网站链接）

代码：

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

.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, 0.2)
  .text
    padding: 0 12px
    font-size: 14px

不用担心flex布局的兼容性，因为vue-loader在编译vue文件的时候使用了Postcss的工具，它会给有兼容性问题的属性添加兼容性代码，它是根据can i use (http://caniuse.com/)官网去写代码

   写在<style></style>内才会生效。在html中添加style属性是不会添加兼容性代码的

转载于:https://www.cnblogs.com/zhaobao1830/p/6429390.html