flex布局实现一排盒子宽度均分显示

前言

开发中经常会遇到一排需要放置几个盒子,宽度需要等比例均分的情况,这个时候可以使用css的calc() 函数计算 <div> 元素的宽度,可以轻松实现

提示：以下是本篇文章正文内容，下面案例可供参考

一、使用步骤

1.html和css部分

首先附上效果图

代码如下（示例）：

 <ul class="box">

      <li v-for="item in list" :key="item" class="box-item">{{ item }}</li>

    </ul>

  .box {

    display: flex;

    flex-wrap: wrap;

    margin-top: 50px;

    .box-item {

      width: calc((100% - 45px) / 4);

      height: 150px;

      margin-right: 15px;

      border: 1px solid #ddd;

      background-color: Yellowgreen;

      font-size: 16px;

      margin-top: 20px;

    }

    .box-item:nth-child(4n) {

      margin-right: 0;

    }