element-ui的响应式栅格布局（Layout布局）
1.基础栅栏
flex布局对齐方式<el-row :gutter="20">
<el-col :span="6"><div ></div></el-col>
<el-col :span="6"><div class="backgroud-color:#e5e9f2;"></div></el-col>
<el-col :span="6"><div class="backgroud-color:yellow"></div></el-col>
<el-col :span="6"><div class="backgroud-color:blue"></div></el-col>
</el-row>
gutter：每个栅栏之间的相互间隔距离，默认为0。
span：24分栏中，每个栅栏占⽐。
2.分栏偏移
<el-row :gutter="20">
<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：指定分栏偏移的栏数。
3.对齐⽅式
<div id="app">
<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-row>
<el-row type="flex"class="row-bg" justify="space-between">
<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-row>
</div>
将 type 属性赋值为 ‘flex’，可以启⽤ flex 布局，并可通过 justify 属性来指定 start, center, end, space-between, space-around 其中的值来定义⼦元素的排版⽅式
4. 响应式布局

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。