如何在Vue3中实现按上下顺序布局的UI组件？

在 Vue3 中实现按上下顺序布局的 UI 组件，通常可以利用 Flexbox 或者 Grid 这两个 CSS 布局模型。以下是两种方法的简要介绍：

**1. 使用 Flexbox (推荐)**
- 在 .vue 文件的 `.style` 或 `<style lang="scss">` 标签内，设置容器元素的 `display: flex;` 使其变为弹性盒布局。
- 对于需要按照高度顺序排列的组件，你可以使用 `flex-direction: column;` 让它们从上到下堆叠，通过 `align-items: stretch;` 来保持每个组件占据整个行高。

<template>
  <div class="container" :style="{ display: 'flex', flexDirection: isVertical ? 'column' : 'row', alignItems: 'stretch' }">
    <!-- 你的子组件 -->
  </div>
</template>

<script>
export default {
  data() {
    return { isVertical: false };
  },
  // 其他 methods...
}
</script>

然后可以在 JavaScript 中控制 `isVertical` 的值来切换方向。

**2. 使用 CSS Grid**
- 设置容器元素的 `display: grid;` 并指定网格的方向 (`grid-template-columns` 或 `grid-template-rows`)，如果垂直布局则设为 `auto-fit` 以自动分配列宽（行高）。
- 同样，设置 `justify-items: start` 和 `align-items: stretch` 以保证组件居左并充满行（列）。

<template>
  <div class="container" :style="{ display: 'grid', gridTemplateColumns: isVertical ? 'auto-fit' : 'repeat(auto-fill, minmax(0, 1fr))', justifyItems: 'start', alignItems: 'stretch' }">
    <!-- 你的子组件 -->
  </div>
</template>

**相关问题--:**
1. Flexbox 和 CSS Grid 在哪些场景下更适合使用？
2. Vue3 的模板语法如何处理动态样式绑定？
3. 如果我想让子组件能够自适应高度，该怎么做？