許久沒(méi)有更新了，今天才意外發(fā)現(xiàn)以前還是沒(méi)有看懂盒模型，今天才算看懂了，首先我們今天來(lái)看一下想要實(shí)現(xiàn)的效果是什么?當(dāng)然適配是必須的，1920 或者 1376都測(cè)試過(guò)。效果如圖所選中區(qū)域所示：

一、關(guān)于flex布局我建議去看一下http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html這篇博客，我們主要用到flex布局的一個(gè)換行屬性，它是flex-wrap: wrap，自動(dòng)換行。

二、vue代碼

（1）html部分：

<div class='home-card'> <div v-for='n in 7' :key='n'> <img :src='http://m.b3g6.com/bcjs/require(’_img/icon.png’)' alt=''> <div class='home-right'> <span style='color: #999; fontSize: 12px'>當(dāng)周流入總計(jì)</span> <span class=’home-num’ >124,345</span> <span><i ></i> <i style='color: red'>&nbsp;-10%</i>&nbsp;&nbsp; <span style='color: #999; fontSize: 12px'>同比上月</span></span> </div> </div> </div>

（2）css部分

.home-card { width 100% overflow hidden padding 10px 0px display flex flex-wrap: wrap .home-item { border-style solid border-width: 1px border-color: #E4E4E4 width calc(25% - 30px) padding 20px 0px 20px 20px margin-right 10px margin-bottom 10px display flex align-items center background #fff &:nth-child(4) { margin-right 0 } .home-img { display inline-block width 60px height 60px margin 0 padding 0 } .home-right { display flex flex-direction column justify-content center align-items flex-start margin-left 10px .home-num { font-size 40px margin 5px 0 } } } }

要想每一個(gè)div剛好能自動(dòng)填充適配，最關(guān)鍵的就是css樣式里面的寬度計(jì)算：也就是width: calc(25% - 30px),因?yàn)樽畲髮挾仁?00%，每一個(gè)平分下來(lái)是25%，剩下的這么算呢？看圖

每一個(gè)home-item共占用32px,去掉10px，每個(gè)平分2.5px，也就是home-item占用32-2.5=29.5px，算30px，這樣就實(shí)現(xiàn)寬度自動(dòng)填充實(shí)現(xiàn)適配了。哈哈

到此這篇關(guān)于vue flex 布局實(shí)現(xiàn)div均分自動(dòng)換行的文章就介紹到這了,更多相關(guān)vue div均分自動(dòng)換行內(nèi)容請(qǐng)搜索好吧啦網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持好吧啦網(wǎng)！