当前位置：首页 > VUE

vue实现弹性布局

2026-03-29 21:08:55VUE

使用 Flexbox 实现弹性布局

在 Vue 中实现弹性布局主要依赖 CSS 的 Flexbox 模型。以下是几种常见实现方式：

vue实现弹性布局

基础 Flex 容器设置

<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;
}
</style>

响应式 Flex 布局

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

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

.responsive-item {
  flex: 1 0 200px;
  margin: 10px;
}

@media (max-width: 768px) {
  .responsive-item {
    flex-basis: 100%;
  }
}
</style>

动态 Flex 方向

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

<script>
export default {
  data() {
    return {
      direction: 'row',
      items: [
        { id: 1, text: 'Item A' },
        { id: 2, text: 'Item B' }
      ]
    }
  }
}
</script>

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

嵌套 Flex 布局

<template>
  <div class="main-container">
    <header class="header">Header</header>
    <div class="content">
      <aside class="sidebar">Sidebar</aside>
      <main class="main-content">Main Content</main>
    </div>
  </div>
</template>

<style>
.main-container {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.header {
  height: 60px;
}

.content {
  display: flex;
  flex: 1;
}

.sidebar {
  width: 250px;
}

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