vue flex 布局實現(xiàn)div均分自動換行的示例代碼
許久沒有更新了,今天才意外發(fā)現(xiàn)以前還是沒有看懂盒模型,今天才算看懂了,首先我們今天來看一下想要實現(xiàn)的效果是什么?當(dāng)然適配是必須的,1920 或者 1376都測試過。效果如圖所選中區(qū)域所示:

一、關(guān)于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.leifengta.com.cn/bcjs/require(’_img/icon.png’)' alt=''> <div class='home-right'> <span style='color: #999; fontSize: 12px'>當(dāng)周流入總計</span> <span class=’home-num’ >124,345</span> <span><i ></i> <i style='color: red'> -10%</i> <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剛好能自動填充適配,最關(guān)鍵的就是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)適配了。哈哈
到此這篇關(guān)于vue flex 布局實現(xiàn)div均分自動換行的文章就介紹到這了,更多相關(guān)vue div均分自動換行內(nèi)容請搜索好吧啦網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持好吧啦網(wǎng)!
相關(guān)文章:
1. 詳解Android studio 動態(tài)fragment的用法2. 解決Android studio xml界面無法預(yù)覽問題3. 圖文詳解vue中proto文件的函數(shù)調(diào)用4. Spring Boot和Thymeleaf整合結(jié)合JPA實現(xiàn)分頁效果(實例代碼)5. php模擬實現(xiàn)斗地主發(fā)牌6. 什么是python的自省7. Vue封裝一個TodoList的案例與瀏覽器本地緩存的應(yīng)用實現(xiàn)8. vue 使用localstorage實現(xiàn)面包屑的操作9. .Net Core使用Coravel實現(xiàn)任務(wù)調(diào)度的完整步驟10. Vuex localStorage的具體使用

網(wǎng)公網(wǎng)安備