Vue项目中如何根据列表元素数量动态设置flex-item宽度

这里有几种实用的方法来实现你的需求：

方法一：动态绑定CSS类（推荐，兼容性好） #

修改模板，根据list的长度为flex-item绑定不同的类：

<div class="flex-container"> 
  <div 
    class="flex-item" 
    :class="{ 'full-width': list.length <= 2 }"
    v-for="(item, index) in list" 
    :key="index" <!-- 务必添加key以优化渲染性能 -->
  >
    {{ item.text }} 
  </div>
</div>

补充对应的CSS样式：

.flex-container {
  display: flex; 
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-end;
  align-content: center;
}

.flex-item {
  width: 40%; /* 元素数量≥3时的默认宽度 */
  margin-bottom: 1rem; /* 可选：添加间距优化布局 */
}

.flex-item.full-width {
  width: 100%; /* 元素数量≤2时覆盖默认宽度 */
}

方法二：计算属性动态设置样式 #

通过Vue计算属性直接返回宽度值，绑定到元素的style上：

<div class="flex-container"> 
  <div 
    class="flex-item" 
    :style="{ width: itemWidth }"
    v-for="(item, index) in list" 
    :key="index"
  >
    {{ item.text }} 
  </div>
</div>

在组件的script部分添加计算属性：

export default {
  data() {
    return {
      list: [] // 存储从API获取的数据
    }
  },
  computed: {
    itemWidth() {
      return this.list.length <= 2 ? '100%' : '40%';
    }
  },
  mounted() {
    // 示例：调用API获取数据并赋值给list
    this.fetchList().then(res => {
      this.list = res.data;
    });
  }
}

原有CSS样式保持不变即可。

方法三：纯CSS :has选择器（现代浏览器适用） #

如果你的项目仅需兼容现代浏览器，可通过CSS的:has选择器实现，无需修改Vue代码：

.flex-container {
  display: flex; 
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-end;
  align-content: center;
}

/* 默认所有flex-item占满宽度 */
.flex-container .flex-item {
  width: 100%;
  margin-bottom: 1rem;
}

/* 当容器中存在至少3个flex-item时，设置宽度为40% */
.flex-container:has(.flex-item:nth-child(3)) .flex-item {
  width: 40%;
}

注意：:has选择器不支持IE浏览器，Chrome、Firefox 121+、Safari等现代浏览器已支持。

内容的提问来源于stack exchange，提问作者Kgn-web