flex布局下如何让同一div内的指定span元素换行显示？

你的问题出在所有子元素都是flex容器的直接子项，在flex布局默认的flex-direction: row下，.annual和.price会被当作两个独立的横向项排列，自然处于同一行。要实现它们上下换行的效果，需要把这两个span包裹在一个子容器里，让这个子容器成为flex项，内部再设置垂直布局。

修正后的HTML代码 #

<div class="priceinfo">
        <img src="order-summary-component-main/images/icon-music.svg" />
        <div class="plan-details">
            <span class="annual">Annual plan</span>
            <span class="price">&#x24; 59.99/year</span>
        </div>
        <a class="change" href="">Change</a>
</div>

修正后的CSS代码 #

.priceinfo {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem; /* 可选：给元素之间添加间距，优化视觉效果 */
}

.plan-details {
  display: flex;
  flex-direction: column;
  /* 若需要价格文本左对齐，可添加 align-items: flex-start; */
}

补充说明 #

• 新增的.plan-details容器通过flex-direction: column让内部两个span垂直排列，自动实现换行效果。
• 保留.priceinfo的align-items: center，可以让中间的文本区域和图片、Change按钮保持垂直居中对齐，匹配设计图的视觉要求。
• gap属性可以快速给flex项之间添加均匀间距，比手动设置margin更简洁可控。

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