vue 实现弹性布局

使用 Flexbox 实现弹性布局

在 Vue 中实现弹性布局可以通过 CSS 的 Flexbox 模型来完成。Flexbox 是一种一维布局模型，适合在组件或页面中实现灵活的排列和对齐。

在 Vue 单文件组件中，可以直接在 <style> 标签中定义 Flexbox 样式：

<template>
  <div class="flex-container">
    <div class="flex-item">Item 1</div>
    <div class="flex-item">Item 2</div>
    <div class="flex-item">Item 3</div>
  </div>
</template>

<style>
.flex-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
}

.flex-item {
  flex: 1;
  min-width: 0;
}
</style>

响应式弹性布局

结合 Vue 的响应式特性，可以根据屏幕尺寸调整 Flexbox 属性：

<template>
  <div :class="['flex-container', { 'flex-column': isMobile }]">
    <div class="flex-item" v-for="item in items" :key="item.id">
      {{ item.text }}
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isMobile: false,
      items: [
        { id: 1, text: 'Item 1' },
        { id: 2, text: 'Item 2' },
        { id: 3, text: 'Item 3' }
      ]
    }
  },
  mounted() {
    this.checkScreenSize()
    window.addEventListener('resize', this.checkScreenSize)
  },
  beforeDestroy() {
    window.removeEventListener('resize', this.checkScreenSize)
  },
  methods: {
    checkScreenSize() {
      this.isMobile = window.innerWidth < 768
    }
  }
}
</script>

<style>
.flex-container {
  display: flex;
  gap: 15px;
}

.flex-column {
  flex-direction: column;
}

.flex-item {
  flex: 1;
}
</style>

动态控制弹性项目

Vue 的数据绑定可以动态控制 Flex 项目的属性：

<template>
  <div class="flex-container">
    <div 
      v-for="item in items" 
      :key="item.id"
      class="flex-item"
      :style="{ flex: item.flexGrow }"
    >
      {{ item.text }}
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: [
        { id: 1, text: 'Item 1', flexGrow: 1 },
        { id: 2, text: 'Item 2', flexGrow: 2 },
        { id: 3, text: 'Item 3', flexGrow: 1 }
      ]
    }
  }
}
</script>

<style>
.flex-container {
  display: flex;
  gap: 10px;
}

.flex-item {
  min-width: 0;
}
</style>

使用 CSS Grid 作为补充

对于更复杂的布局需求，可以结合 CSS Grid 和 Flexbox：

<template>
  <div class="grid-container">
    <div class="grid-item" v-for="item in 6" :key="item">
      <div class="flex-container">
        <div class="flex-icon">📦</div>
        <div class="flex-content">Item {{ item }}</div>
      </div>
    </div>
  </div>
</template>

<style>
.grid-container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 20px;
}

.flex-container {
  display: flex;
  align-items: center;
  gap: 8px;
}

.flex-icon {
  font-size: 24px;
}

.flex-content {
  flex: 1;
}
</style>

使用 Tailwind CSS 实现弹性布局

如果项目使用 Tailwind CSS，可以更简洁地实现弹性布局：

<template>
  <div class="flex flex-wrap gap-4 justify-between items-center p-4">
    <div 
      v-for="item in items"
      :key="item.id"
      class="flex-1 min-w-0 p-3 bg-gray-100 rounded"
    >
      {{ item.text }}
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: [
        { id: 1, text: 'Flex Item 1' },
        { id: 2, text: 'Flex Item 2' },
        { id: 3, text: 'Flex Item 3' }
      ]
    }
  }
}
</script>