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屬性是不會添加兼容性代碼的