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

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

二、vue代碼

（1）html部分：

<div class='home-card'> <div v-for='n in 7' :key='n'> <img :src='http://www.4tl426be.cn/bcjs/require(’_img/icon.png’)' alt=''> <div class='home-right'> <span style='color: #999; fontSize: 12px'>當周流入總計</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 } } } }

要想每一個div剛好能自動填充適配，最關鍵的就是css樣式里面的寬度計算：也就是width: calc(25% - 30px),因為最大寬度是100%，每一個平分下來是25%，剩下的這么算呢？看圖

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

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