在 Flex Tailwind 上设置固定间隙

Posted 2023-03-07

【中文标题】在 Flex Tailwind 上设置固定间隙

【英文标题】：Set Fixed Gap on 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，这正是我所需要的。我担心包含标题的第二列。

【参考方案1】：

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

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

【讨论】：

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