如何基于移动端和桌面端断点调整div内span元素的换行排布

实现代码 #

直接使用Tailwind自带的flex布局加断点能力即可实现，完整代码如下：

<div class="flex flex-wrap">
    <span class="sm:w-full"> foo </span>
    <span> bar </span>
    <span class="w-full sm:w-auto"> baz </span>
</div>

实现逻辑说明 #

• 外层div启用flex布局并允许换行，作为容器承载三个span元素
• 以Tailwind默认的sm断点（640px，可自行在tailwind.config中自定义断点数值）作为移动端和桌面端的分界：
  • 移动端（屏幕宽度 < 640px）：第一个span宽度为内容自适应，第三个span设置100%宽度强制换行，因此前两个span排在同一行，第三个span独占第二行，符合要求的移动端排布效果
  • 桌面端（屏幕宽度 ≥ 640px）：第一个span设置100%宽度强制独占第一行，第三个span恢复为内容自适应宽度，因此第二个和第三个span排在同一行，符合要求的桌面端排布效果

如果需要调整同排span之间的间距，可在外层容器添加gap-x-*类自定义间距，比如gap-x-2即可增加0.5rem的水平间距；如果需要去掉span之间默认的空格，直接删除span标签之间的换行和空格即可。

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