Tailwind CSS Flex布局渲染异常问题咨询

你需要实现标题单独一行，下方文本与Orbit组件在中等屏幕及以上横向排列，当前布局未达到预期，可通过以下修改解决：

修改后的代码 #

<div className="flex flex-col">
  <div className="w-full">
    <p className="text-7xl">Skills</p>
  </div>
  <div className="flex flex-col md:flex-row gap-4">
    <div className="flex-1">
      <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorem
        labore consectetur, adipisci dicta illum ratione aperiam recusandae
        perferendis. Corporis nihil commodi in! Pariatur, molestias
        similique officiis ad quis impedit dolore.
      </p>
    </div>
    <div className="shrink-0">
      <Orbit items={orbitItems} size="text-4xl" />
    </div>
  </div>
</div>

关键改动说明 #

• 给文本所在容器添加flex-1：让文本区域在flex布局中自动占据剩余可用空间，确保Orbit组件能和它横向并排
• 给Orbit组件容器添加shrink-0（可选）：避免Orbit组件在空间不足时被压缩变形，适合组件有固定尺寸需求的场景
• 新增gap-4：控制文本与Orbit组件之间的间距，提升布局美观度

如果Orbit组件本身自带w-full这类强制占满宽度的样式，需要移除该样式才能让横向排列生效。

内容的提问来源于stack exchange，提问作者Laxman