时间戳

首页 > 解决方案 > 在 Flex Tailwind 上设置固定间隙

css - 在 Flex Tailwind 上设置固定间隙

问题描述

这是我的 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>

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

标签： cssflexboxtailwind-css

解决方案

将flex-grow类添加到带有标题的块并为父级设置space-x-{value} 类，以便在子元素之间添加间隙。演示

PS你有bg-${props.color}-600哪些将在生产模式下被清除

推荐阅读