使用 flexbox (tailwindcss: flex-1) 如何将背景颜色添加到整个元素而不仅仅是文本？

Posted 2023-03-07

【中文标题】使用 flexbox (tailwindcss: flex-1) 如何将背景颜色添加到整个元素而不仅仅是文本？

【英文标题】：Using flexbox (tailwindcss: flex-1) how do I add background colour to WHOLE element not just the text?

【发布时间】：2021-12-18 18:30:38

【问题描述】：

在我的标签设计方面寻求帮助。我使用一个有两个部分的 flexbox。顶部为主要内容，底部为“选项卡”按钮，可根据所选选项卡更改主要内容数据。

我希望能够将鼠标悬停在按钮上，并且我希望包含此元素的整个 div 突出显示（不同的背景颜色），并且在选择时以不同的颜色永久突出显示。

目前，当我将鼠标悬停时，只有 div 内的文本会突出显示 + 指定边距。如何让整个 div 改变背景颜色？

CodeSandbox

<template>
  <!-- CONTAINER -->
  <div
    class="flex-col bg-gray-200 w-11/12 rounded-xl border-2 m-auto pt-2 mt-2"
  >
    <!-- MAIN CONTENT -->
    <div class="flex pb-2 bg-green-500 py-10">MAIN CONTENT</div>
    <!-- Tabs -->
    <div class="flex w-full text-sm text-center items-center bg-blue-500">
      <div class="flex-1 px-1">
        <div class="flex justify-center hover:bg-red-500 cursor-pointer">
          <span class="my-4">Tab 1</span>
        </div>
      </div>
      <div class="flex-1 px-1">
        <div class="flex justify-center hover:bg-red-500 cursor-pointer">
          <span class="my-4">short tab 2</span>
        </div>
      </div>
      <div class="flex-1 px-1">
        <div class="flex justify-center hover:bg-red-500 cursor-pointer">
          <span class="my-4">Long Tab name 3</span>
        </div>
      </div>
      <div class="flex-1 px-1">
        <div class="flex justify-center hover:bg-red-500 cursor-pointer">
          <span class="my-4">This is super Long Tab name 4</span>
        </div>
      </div>
      <div class="flex-1 px-1">
        <div class="flex justify-center hover:bg-red-500 cursor-pointer">
          <span class="my-4">This is SUPER extra long tab name 5</span>
        </div>
      </div>
    </div>
  </div>
</template>

【参考方案1】：

由于您使用的是flexbox，因此您需要进行一些小的调整才能使其正常工作，其中每个div（我们称之为div-1）都包含一个进一步包含span元素的子div，我们可以将 div-1 转换为方向设置为列的 flexbox 并进一步应用flex-grow 使其占据父级div 的全部高度，以及已经存在的flex-1，这是因为此div 位于div 下，其flex-direction 被指定为row。flex-grow 在flex-direction 为column 时在y 轴上增长。子 div 再次需要具有 align-items:center、justify-content:center 和 flex-grow:1 属性，以便其中的文本居中，并且此 div 再次占据其父 div( div1 根据我们的示例）。

<template>
  <!-- CONTAINER -->
  <div
    class="flex-col bg-gray-200 w-11/12 rounded-xl border-2 m-auto pt-2 mt-2"
  >
    <!-- MAIN CONTENT -->
    <div class="flex pb-2 bg-green-500 py-10">MAIN CONTENT</div>
    <!-- Tabs -->
    <div class="flex text-sm text-center bg-blue-500">
      <div class="flex -1 flex flex-col flex-grow hover:bg-red-500">
        <div class="flex justify-center items-center flex-grow">
          <span>Tab 1</span>
        </div>
      </div>
      <div class="flex-1 flex flex-col flex-grow hover:bg-red-500">
        <div class="flex justify-center items-center flex-grow">
          <span class="my-4">short tab 2</span>
        </div>
      </div>
      <div class="flex-1 flex flex-col flex-grow hover:bg-red-500">
        <div class="flex justify-center items-center flex-grow">
          <span class="my-4">Long Tab name 3</span>
        </div>
      </div>
      <div class="flex-1 flex flex-col flex-grow hover:bg-red-500">
        <div class="flex justify-center items-center flex-grow">
          <span class="my-4">This is super Long Tab name 4</span>
        </div>
      </div>
      <div class="flex-1 px-1 flex flex-col flex-grow hover:bg-red-500">
        <div class="flex justify-center items-center flex-grow">
          <span class="my-4">This is SUPER extra long tab name 5</span>
        </div>
      </div>
    </div>
  </div>
</template>

【讨论】：

非常感谢！这解决了我的问题！