vueflex 布局实现div 均分⾃动换⾏
vue 布局实现div 均分⾃动换⾏
许久没有更新了，今天才意外发现以前还是没有看懂盒模型，今天才算看懂了，⾸先我们今天来看⼀下想要实现的效果是什么?当然适配
是必须的，1920 或者 1376都测试过。效果如图所选中区域所⽰：
⼀、关于flex布局我建议去看⼀下这篇博客，我们主要⽤到flex布局的⼀个换⾏属性，它是flex-wrap: wrap，⾃动换⾏。
⼆、vue代码html的flex布局
（1）html部分：（2）css部分
1
<div class="home-card">2
<div class="home-item" v-for="n in 7" :key="n">3
<img class="home-img" :src="require('_img/icon.png')" alt="">4
<div class="home-right">5
<span >当周流⼊总计</span>6
<span class='home-num' >124,345</span>7
<span><i class="el-icon-caret-bottom" ></i> <i > -10%</i>    <span style=8
</div>9      </div>10    </div>
要想每⼀个div刚好能⾃动填充适配，最关键的就是css样式⾥⾯的宽度计算：也就是width: calc(25%  -  30px)，因为最⼤宽度是100%，
每⼀个平分下来是25%，剩下的这么算呢？看图
每⼀个home-item共占⽤32px，去掉10px，每个平分2.5px，也就是home-item占⽤32-2.5=29.5px，算30px，这样就实现宽度⾃动填充实现适配了。哈哈
1
.home-card {2
width 100%3
overflow hidden 4
padding 10px 0px 5
display flex 6
flex-wrap: wrap 7
.home-item {8
border-style solid 9
border-width: 1px 10
border-color: #E4E4E411
width calc(25% - 30px)12
padding 20px 0px 20px 20px 13
margin-right 10px 14
margin-bottom 10px 15
display flex 16
align-items center 17
background #fff 18
&:nth-child(4) {19
margin-right 020
}21
.
home-img {22
display inline-block 23
width 60px 24
height 60px 25
margin 026
padding 027
}28
.home-right {29
display flex 30
flex-direction column 31
justify-content center 32
align-items flex-start 33
margin-left 10px 34
.home-num {35
font-size 40px 36
margin 5px 037
}38
}39    }40  }

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