Flex 项目响应问题

Posted 2023-03-07

【中文标题】Flex 项目响应问题

【英文标题】：Flex items responsive issues

【发布时间】：2021-09-16 01:03:33

【问题描述】：

我正在使用 Tailwind，我制作了这个 div：

问题是当我缩小它时它看起来像这样：

使用 white-space: nowrap 它会从 div 中删除。

我无法解决此问题。但是，当它低于 md 屏幕时，我已将其放入列中，但不确定如何在分辨率更改时阻止它制作另一行。

代码：

<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 md:space-x-16 whitespace-nowrap'>

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

            <div className='flex flex-col flex-grow'>
                <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 md:pr-4'>
                <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>

【问题讨论】：

你试过white-space: nowrap吗？

是的@fevid，正在编辑帖子。

它们不能适应较小的屏幕而不溢出您的 div，您应该在较小的屏幕中使用较小的字体大小或减少列之间的间隙。

@fevid 事情是所有的屏幕截图都是 lg: viewport。一旦它进入 md 或更小，我已经让它进入​​列模式。将尝试更改字体大小并减少差距。但是有没有更好的解决方案？

您可以将w-7/12 类更改为w-full max-w-5xl 或w-full lg:w-7/12，因为您的父母没有足够的空间。 flex-wrap 也是一个选项，但它需要额外的设计（在哪里放置日期、插槽等）

【参考方案1】：

最好的解决方案如果你不想让字体更小，IMO 将是：在右侧的三列上添加一个包装器，并使其成为 flex 和 @987654322 @。

它会根据剩余使用空间调整间隙。

似乎您在左侧内容的标题是动态的，并且可能会变得很长，请尝试限制文本宽度并在其上使用text-overflow: ellipsis。否则你不能在其他内容旁边放置长文本。

【讨论】：

如何调整代码中的间隙？是否有边际或其他东西使两者之间存在差距？如果这些列之间有任何边距，请删除命令重试。

@AviThour，第二个是新结果吗？问题是什么？父母没有采取全宽？

在你的父 div 上添加 width: 100%，然后它应该占据浏览器的整个宽度，我会用另一个提示更新我的答案

在width: 100%下方添加与您的导航栏相同的max-width

感谢您帮助我，但是我无法修复此解决方案。我已经尝试了互联网上可用的所有方法。不确定我是否可以选择您的答案作为答案，但还是投了赞成票。感谢您的帮助。