vue响应式布局

<template>
  <div class="container">
    <div class="box" v-for="(item, index) in items" :key="index">{{ item }}</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: [1, 2, 3, 4, 5]
    };
  }
};
</script>

<style scoped>
.container {
  display: flex;
  flex-wrap: wrap;
}

.box {
  flex: 1 1 calc(100% / 3); /* 每行显示3个盒子 */
  min-width: 200px; /* 设置最小宽度 */
  margin: 10px;
  padding: 20px;
  background-color: #f0f0f0;
  text-align: center;
}
</style>

解释说明：

• 模板部分 (<template>)：使用 v-for 指令遍历 items 数组，并为每个元素生成一个 .box 元素。
• 脚本部分 (<script>)：定义了一个包含数字的 items 数组，用于渲染多个盒子。
• 样式部分 (<style scoped>)：
  • 使用了 flex 布局，使容器内的项目可以根据屏幕大小自动换行。
  • flex: 1 1 calc(100% / 3) 表示每行最多显示3个盒子，同时保持响应式布局。
  • min-width: 200px 确保每个盒子在小屏幕上不会变得太窄。

这种布局方式可以确保在不同屏幕尺寸下，盒子能够自动调整排列方式，实现响应式布局。