淺談Vue（使用vue+element ui搭建頁面）

vue + element 搭建網頁是一件不錯的選擇

element網頁佈局

//element官網提供了不少佈局結構，這只是一些佈局心得，網站佈局都是至上而下，至左而右

<el-row>
  <el-col :span="6">
  <div class="grid-content bg-purple"></div>
  </el-col>
  <el-col :span="6" :offset="6">
  <div class="grid-content bg-purple"></div>
  </el-col>
</el-row>

//佈局可能常常用到的就是offset,我的感受element的佈局分佈與bootstrap類似。
<el-row></el-row>分爲24網格
<el-col :span="6" :offset="6">
:span 佔用的網格數  offset向右平移的網格數

經常使用的能夠經過flex佈局（數據來源element ui）

<el-row type="flex" class="row-bg"  justify="center">
  <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
  <el-col :span="6"><div class="grid-content bg-purple-light"></div></el-col>
  <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
</el-row>

flex element佈局

定義type爲 flex,justify 可選start, center, end, space-between, space-around

start 左邊開始排列 
center 居中排列 
end 右邊開始排列 
space-between 左右開始平分排列 
space-around 居中平分排列

佈局經常使用也差很少這樣，考慮響應式佈局帶上xs,sm,md,lg

xs       <768px 
sm       ≥768px 
md       ≥992 
lg      ≥1200

• web學習交流羣：362513833