在 Flex Tailwind 上设置固定间隙答案

【问题标题】：Set Fixed Gap on Flex Tailwind在 Flex Tailwind 上设置固定间隙
【发布时间】：2021-09-15 22:26:18
【问题描述】：

这是我的 flex 设计。您可以看到两个 div 之间有不同的差距。我怎样才能使它相等？ 我只想为第二列设置一个固定宽度，但是我无法在 Tailwind 中实现。

代码：

    <div className='bg-gray-1000 rounded shadow border border-opacity-50 text-white flex flex-col lg:flex-row w-7/12 mx-auto justify-between p-2 mb-2 items-center'>

            <div className='bg-primary rounded w-14 h-14 flex items-center'>
                <img src={props.logo}/>
            </div>

            <div className='flex flex-col'>
                <div>{props.title}</div>
                <div className='flex'>
                    <div><img className='w-6 mt-1' src={props.flag}/></div>
                    <div><FaInfoCircle className='inline ml-2 text-xl'/></div>
                    <div><button className={`ml-2 rounded px-4 py-0 text-sm uppercase bg-${props.color}-600`} disabled>{props.mode}</button></div>
                </div>
            </div>

            <div className='flex flex-col'>
                <div><FaCalendar className='inline mr-2 text-xl'/> {props.date}</div>
                <div className='mt-1'><FaClock className='inline mr-2 text-xl'/> {props.time}</div>
            </div>

            <div className='flex flex-col'>
                <div> <FaUsers className='inline mr-2 text-xl'/> {props.vs}</div>
                <div className='mt-1'><FaUsers className='inline mr-2 text-xl'/> {props.slots} Slots</div>
            </div>

            <div className='flex flex-col'>
                <div><AiFillDollarCircle color='green' className='inline mr-2 text-xl'/></div>
                <div className='mt-1'><AiFillTrophy className='inline mr-2 text-xl md:text-2xl'/> {props.prize}</div>
            </div>

    </div>

我很想在这方面得到一些帮助，干杯。

【问题讨论】：

这里的宽度是 14，而 flexbox 总是适应整个宽度。一种选择是使用“假”占位符元素，该元素具有达到 14 所需的剩余宽度。这将具有空的外观，但会占用指示 flexbox 调整列所需的空间，如顶部图像中所示。
@ObsidianAge 我的图像 div 的宽度为 14，这正是我所需要的。我担心包含标题的第二列。

标签： css flexbox tailwind-css

【解决方案1】：

将flex-grow 类添加到带有标题的块中，并将space-x-{value} class 设置为父元素，这样它将在子元素之间添加间隙。 Demo

P.S.你有bg-${props.color}-600，在生产模式下是purged

【讨论】：

感谢您让我知道按钮颜色，干杯。