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

刺骨的言语ヽ痛彻心扉 2022-03-29 13:58 485阅读 0赞

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

许久没有更新了，今天才意外发现以前还是没有看懂盒模型，今天才算看懂了，首先我们今天来看一下想要实现的效果是什么?当然适配是必须的，1920 或者 1376都测试过。效果如图所选中区域所示：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTMxNDQyODc_size_16_color_FFFFFF_t_70][]

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTMxNDQyODc_size_16_color_FFFFFF_t_70 1][]

二、vue代码

（1）html部分：

<div class="home-card">
          <div class="home-item" v-for="n in 7" :key="n">
            <img class="home-img" :src="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 class="el-icon-caret-bottom" style="color: red; fontSize: 12px" ></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刚好能自动填充适配，最关键的就是css样式里面的宽度计算：也就是width: calc(25%  -  30px),因为最大宽度是100%，每一个平分下来是25%，剩下的这么算呢？看图

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTMxNDQyODc_size_16_color_FFFFFF_t_70 2][]

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

![20190108214021156.jpg][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTMxNDQyODc_size_16_color_FFFFFF_t_70]: /images/20220329/e99b7c873af94a3b944c3a2709a1d2a9.png
[http_www.ruanyifeng.com_blog_2015_07_flex-grammar.html]: http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTMxNDQyODc_size_16_color_FFFFFF_t_70 1]: /images/20220329/5a4b0f1c676a4179a8416d139cfc6a18.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTMxNDQyODc_size_16_color_FFFFFF_t_70 2]: /images/20220329/655c46ce3b15467daab5cbd883dcfa1f.png
[20190108214021156.jpg]: /images/20220329/977e551f567b482fb7445f4b7bb2dd2e.png