CSS文本左右对齐问题：flex布局下元素分行显示如何解决？

嘿，刚接触Flex布局遇到这个小问题很正常～你的核心需求是让两个<span>在同一行分别左对齐和右对齐，现在它们换行的原因是父容器<h1>没有启用Flex布局，虽然你给两个span单独加了display:flex，但h1本身还是默认的块级元素，子元素会自动换行。

解决方案：给父容器<h1>添加Flex属性 #

只需要修改<h1>的样式，让它成为Flex容器，再通过justify-content控制子元素的对齐方式即可：

<div style="background-color: #25a0da; color: White; margin: 0">
  <h1 style="margin: 0 20px; padding: 0; line-height: 52px; display: flex; justify-content: space-between;">
    <span><asp:Literal ID="litDateRange4" runat="server"></asp:Literal></span>
    <span><asp:Literal ID="litPendingProfit" runat="server"></asp:Literal></span>
  </h1>
</div>

关键修改点说明： #

• display: flex：把h1变成Flex容器，它的子元素（两个span）会默认在同一行排列（Flex的主轴方向默认是水平）
• justify-content: space-between：让两个子元素分别靠向容器的左右两端，完美实现你要的左对齐+右对齐效果
• 两个span原来的display:flex和justify-content可以去掉啦，因为现在父容器已经帮我们处理了整体的位置对齐；如果你的span内部还有子元素需要单独对齐，再保留这些属性也没问题

这样修改后，两个span就会在同一行分别贴住左右边啦😉

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