Tailwind 子 Div 填满居中的父级：三招搞定，让布局更轻松

2024-03-21 10:48:03

在 Tailwind 中让子 div 填满 mx-auto 父级：全面的解决方案

当构建响应式用户界面时，使用 flex 布局、grid 布局或绝对定位可以让子 div 轻松填满整个可用空间。然而，当父级被定义为 mx-auto（居中）时，实现这一目标会更具挑战性。本指南将深入探讨如何在 Vue 和 Tailwind 中解决此问题，并提供三种有效的方法，让子 div 在不修改父模板的情况下完美填满父级。

问题：子 div 无法填满居中的父级

在特定场景中，我们有一个父 div 被设置为 mx-auto，目的是使其在水平方向上居中。在这个父 div 内，我们放置了一个子 div，希望它能占据父 div 的整个可用空间。然而，简单地使用 h-full 类并不能实现预期效果，反而会创建一个小框架。

解决方案：三种有效的方法

方法 1：flex 布局

使用 flex 布局，我们可以让子 div 占据父 div 的剩余空间。这是实现这一目标最简单的方法。

将父 div 设置为 display: flex，并添加 flex-direction: column 类。
将子 div 设置为 flex-grow: 1，使其占据父 div 中的剩余空间。

方法 2：grid 布局

grid 布局提供了一种更强大的方式来控制元素布局。我们可以使用它来创建单行网格，并让子 div 占据整个行。

将父 div 设置为 display: grid，并添加 grid-template-rows: 1fr 类。
将子 div 设置为 grid-row: 1，使其占据父 div 中的唯一行。

方法 3：绝对定位

绝对定位允许我们将子 div 定位在父 div 的任何位置。我们可以使用它来占据父 div 的整个可用空间，同时避免出现滚动条。

将父 div 设置为 position: relative，并添加 max-width: [desired width] 类。
将子 div 设置为 position: absolute，top: 0，left: 0，right: 0，bottom: 0，使其占据父 div 的整个可用空间。

代码示例

以下是使用这三种方法的代码示例：

flex 布局：

<template>
  <div class="mx-auto mt-4 max-w-3xl flex flex-col">
    <slot></slot>
  </div>
</template>

<script>
import { defineComponent } from 'vue';

export default defineComponent({
  name: 'ParentComponent',
  components: {}
});
</script>

<template>
  <div class="inline-flex h-full w-full items-center justify-center bg-green-500 px-6 py-6 flex-grow-1">
    This is the text
  </div>
</template>

grid 布局：

<template>
  <div class="mx-auto mt-4 max-w-3xl grid grid-template-rows: 1fr">
    <slot></slot>
  </div>
</template>

<script>
import { defineComponent } from 'vue';

export default defineComponent({
  name: 'ParentComponent',
  components: {}
});
</script>

<template>
  <div class="inline-flex h-full w-full items-center justify-center bg-green-500 px-6 py-6 grid-row: 1">
    This is the text
  </div>
</template>

绝对定位：

<template>
  <div class="mx-auto mt-4 max-w-3xl position-relative">
    <slot></slot>
  </div>
</template>

<script>
import { defineComponent } from 'vue';

export default defineComponent({
  name: 'ParentComponent',
  components: {}
});
</script>

<template>
  <div class="inline-flex h-full w-full items-center justify-center bg-green-500 px-6 py-6 position-absolute top-0 left-0 right-0 bottom-0">
    This is the text
  </div>
</template>