栅格布局
栅格布局就是把一个页面的宽度分成了24份,
<template> <div> <!-- 栅格布局 el-row属性 :gutter="10" 设置 每一个栅格之间的间隔 不写默认是0 type="flex" 布局模式 justify="center" flex 布局下的水平排列方式 align="middle" flex 布局下的垂直排列方式 el-row属性 :span="8" 栅格占据的列数(栅格的宽度) :offset="1" 栅格左侧的间隔格数 (可以设置栅格左侧的距离和移动栅格的位置) :push="1" 栅格向右移动的格数 (可以设置栅格向右移动) :pull="1" 栅格向左移动的格数 (可以设置栅格向左移动) --> <el-row :gutter="10" type="flex" align="middle"> <el-col :span="8" :offset="1" :push="1" :pull="1"> <div class="grid-content bg-purple"></div> </el-col> <el-col :span="8" :push="1"> <div class="grid-content bg-purple"></div> </el-col> </el-row> <!-- 响应式的栅格 :xs 是在屏幕宽度<768px 显示的宽度 :sm 是在屏幕宽度>=768px 显示的宽度 :md 是在屏幕宽度>=992px 显示的宽度 :lg 是在屏幕宽度>=1200px 显示的宽度 :xl 是在屏幕宽度>=1920px 显示的宽度 --> <el-row :gutter="10"> <el-col :xs="8" :sm="6" :md="4" :lg="3" :xl="1"> <div class="grid-content bg-purple"></div> </el-col> <el-col :xs="4" :sm="6" :md="8" :lg="9" :xl="11"> <div class="grid-content bg-purple-light"></div> </el-col> <el-col :xs="4" :sm="6" :md="8" :lg="9" :xl="11"> <div class="grid-content bg-purple"></div> </el-col> <el-col :xs="8" :sm="6" :md="4" :lg="3" :xl="1"> <div class="grid-content bg-purple-light"></div> </el-col> </el-row> </div> </template> <script> </script> <style> .el-row { margin-bottom: 20px; &:last-child { margin-bottom: 0; } } .el-col { border-radius: 4px; } .bg-purple-dark { background: #99a9bf; } .bg-purple { background: #d3dce6; } .bg-purple-light { background: #e5e9f2; } .grid-content { border-radius: 4px; min-height: 36px; } .row-bg { padding: 10px 0; background-color: #f9fafc; } </style>
这样就会响应式的根据屏幕的变化而变化就是响应式的