<template>
<div class="parent">
<div class="header"></div>
<div class="content">
123333
</div>
<div class="footer"></div>
</div>
</template>
<style lang="scss" scoped>
.parent {
display: flex;
height: 100vh;
flex-direction: column;
}
.header {
height: 100px;
background: rgb(86, 155, 79);
}
.content {
flex: 1;
background: rgb(83, 52, 112);
display: flex;
justify-content: center;
align-items: center;
color: #fff;
}
.footer {
height: 100px;
background: #d8d52d;
}
</style>
scss 计算等宽
父元素
.flex{
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
.flex-item{
// 10px 间距 4 一行多少个
flex: 0 0 calc((100% - 10px) / 4);
margin: 5px 0;
&:nth-child(3n + 1) {
margin-left: 0;
}
}
}
如图