当前位置：首页 > VUE

vue实现流式布局

2026-03-29 13:18:40VUE

Vue 实现流式布局

流式布局（Fluid Layout）指页面元素按百分比或相对单位自适应屏幕宽度。Vue 中可通过以下方式实现：

使用 CSS Flexbox 或 Grid

通过 CSS 弹性盒子或网格布局实现响应式排列：

vue实现流式布局

<template>
  <div class="fluid-container">
    <div v-for="item in items" :key="item.id" class="fluid-item">
      {{ item.content }}
    </div>
  </div>
</template>

<style>
.fluid-container {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.fluid-item {
  flex: 1 1 calc(33.333% - 10px);
  min-width: 200px;
}
</style>

动态计算宽度

结合 Vue 的响应式特性动态调整元素宽度：

vue实现流式布局

<template>
  <div class="fluid-wrapper">
    <div 
      v-for="item in items" 
      :key="item.id" 
      :style="{ width: itemWidth }"
      class="fluid-box"
    >
      {{ item.content }}
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: [...],
      screenWidth: window.innerWidth
    };
  },
  computed: {
    itemWidth() {
      return this.screenWidth < 768 ? '100%' : '50%';
    }
  },
  mounted() {
    window.addEventListener('resize', this.handleResize);
  },
  methods: {
    handleResize() {
      this.screenWidth = window.innerWidth;
    }
  }
};
</script>

第三方库辅助

使用如 vue-masonry 实现瀑布流等复杂流式布局：

npm install vue-masonry

<template>
  <div v-masonry>
    <div v-masonry-tile v-for="item in items" :key="item.id">
      {{ item.content }}
    </div>
  </div>
</template>

<script>
import { VueMasonryPlugin } from 'vue-masonry';
Vue.use(VueMasonryPlugin);
</script>

响应式断点处理

结合 CSS 媒体查询与 Vue 数据绑定：

.fluid-cell {
  width: 100%;
}
@media (min-width: 600px) {
  .fluid-cell { width: 50%; }
}
@media (min-width: 900px) {
  .fluid-cell { width: 33.33%; }
}

<template>
  <div class="fluid-grid">
    <div 
      v-for="item in items" 
      :key="item.id" 
      class="fluid-cell"
    >
      {{ item.content }}
    </div>
  </div>
</template>