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

Question

我有这个反应组件：

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 个硬编码宽度为 4px 的 flex children (w-1 class)。这是结果：

有没有办法自动设置子项宽度，这样它就可以平等地填满父项space？

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

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;

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

外观如下：

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

TailwindCSS - Set flex child width to fill up whole parent width

css

flexbox

reactjs

tailwind-css