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

一、關于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://m.cgvv.com.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，這樣就實現寬度自動填充實現適配了。哈哈

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