flex布局实现div均分自动换行

来源:blog.csdn.net 更新时间:2023-05-25 21:55

    效果如图所选中区域所示:

 一、关于flex布局我建议去看一下http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html这篇博客,我们主要用到flex布局的一个换行属性,它是flex-wrap: wrap,自动换行。

 

二、vue代码

(1)html部分:

  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 style="color: #999; fontSize: 12px">当周流入总计</span>
  6. <span class='home-num' >124,345</span>
  7. <span><i class="el-icon-caret-bottom" style="color: red; fontSize: 12px" ></i> <i style="color: red">&nbsp;-10%</i>&nbsp;&nbsp; <span style="color: #999; fontSize: 12px">同比上月</span></span>
  8. </div>
  9. </div>
  10. </div>

(2)css部分

  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-data-width: 1px
  10. border-color: #E4E4E4
  11. 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 0
  20. }
  21. .home-img {
  22. display inline-block
  23. width 60px
  24. height 60px
  25. margin 0
  26. padding 0
  27. }
  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 0
  37. }
  38. }
  39. }
  40. }

要想每一个div刚好能自动填充适配,最关键的就是css样式里面的宽度计算:也就是data-width: calc(25%  -  30px),因为最大宽度是100%,每一个平分下来是25%,剩下的这么算呢?看图

 每一个home-item共占用32px,去掉10px,每个平分2.5px,也就是home-item占用32-2.5=29.5px,算30px,这样就实现宽度自动填充实现适配了。哈哈