TailwindCSS - 将 flex 子元素的宽度设置为填满父元素的整个宽度

Question

我有这个 React 组件：

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子元素，以下是结果：

是否有一种方法自动设置子元素的宽度，使其均匀填充父元素空间？

例如：父宽度为100像素，此次我只想渲染10个元素。 使用当前代码将仅占用76像素（来自子宽度的40像素+它们之间的4像素空间的36像素）。 是否有一种方法自动将子元素宽度设置为约6像素？

- Paul Ulibro

Answer 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;

以下是翻译内容：

这里有一个IT技术的工作示例: https://play.tailwindcss.com/rYFniYTQe6

它将会长成这个样子:

- Ben

---

恰好是我想要实现的。谢谢！ - Paul Ulibro