TailwindCSS - 设置 flex 子宽度以填充整个父宽度

Posted 2023-03-07

【中文标题】TailwindCSS - 设置 flex 子宽度以填充整个父宽度

【英文标题】：TailwindCSS - Set flex child width to fill up whole parent width

【发布时间】：2021-12-18 08:02:29

【问题描述】：

我有这个反应组件：

const Status = () => 
  return (
    <div className='h-screen bg-gray-800 flex justify-center items-center p-16'>
      <div className='bg-gray-700 px-8 py-4 rounded w-full'>
        <h2 className='text-2xl text-gray-100 font-medium'>Plex Server</h2>
        <h3 className='text-base text-gray-400'>Added 22/10/2021</h3>
        <div className='flex flex-row w-full space-x-1 my-4'>
          [...Array(30)].map((i, idx) => (
            <div key=idx className='h-8 w-1 bg-green-400 rounded'></div>
          ))
        </div>
      </div>
    </div>
  );
;

export default Status;

我正在使用它来渲染 30 个硬编码宽度为 4 像素（w-1 类）的 flex 子级。结果如下：

有没有办法自动设置子宽度，这样它就会相等地填满父空间？

例如：父宽度为 100px，这次我只想渲染 10 个元素。使用当前代码，它只需要 76 像素（40 像素来自子宽度 + 36 像素来自它们之间的 4 像素空间）。有没有办法将孩子的宽度自动设置为~6px？

【参考方案1】：

您可以使用flex-1 而不是w-1 来做到这一点，它会自动占用宽度，例如：

const Status = () => 
  return (
    <div className='h-screen bg-gray-800 flex justify-center items-center p-16'>
      <div className='bg-gray-700 px-8 py-4 rounded w-full'>
        <h2 className='text-2xl text-gray-100 font-medium'>Plex Server</h2>
        <h3 className='text-base text-gray-400'>Added 22/10/2021</h3>
        <div className='flex flex-row w-full space-x-1 my-4'>
          [...Array(30)].map((i, idx) => (
            <div key=idx className='h-8 flex-1 bg-green-400 rounded'></div>
          ))
        </div>
      </div>
    </div>
  );
;

export default Status;

这是一个工作示例：https://play.tailwindcss.com/rYFniYTQe6

这是它的外观：

【讨论】：

正是我想要实现的。谢谢！