效果如图
需求:
卡片左右两端对齐,间距相同,默认换行,卡片增减不影响布局
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<!-- 引入样式 -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<!-- 引入组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
padding: 50px 200px;
color: #455a64;
}
/* 给 margin 负值,向左右各增加15px */
.row {
display: flex;
flex-wrap: wrap;
margin: 0 -15px;
}
.row .card {
width: 100%;
max-width: 25%;
padding: 0 15px;
margin-bottom: 30px;
}
.row .card-body {
display: flex;
border-radius: 4px;
padding: 30px;
border: 1px solid #EBEEF5;
box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
}
.row .card .icon {
width: 60px;
font-size: 30px;
}
.row .card .content {
flex: 1;
text-align: center;
}
.page-content {
width: 100%;
height: 200px;
margin-top: 20px;
border-radius: 4px;
border: 1px solid #EBEEF5;
box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
}
</style>
</head>
<body>
<div id="app">
<div class="row">
<div class="card" v-for="item in 6" :key="item">
<div class="card-body">
<div class="icon">
<i class="el-icon-shopping-cart-full"></i>
</div>
<div class="content">
<div>$88888</div>
<div>Revenue</div>
</div>
</div>
</div>
</div>
<div class="page-content"></div>
</div>
</body>
<script>
new Vue({
el: '#app'
})
</script>
</html>