如何使用CSS3 Flexbox实现文本元素的响应式对齐与换行适配？

修改CSS样式如下：

.main {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  /* 可选：保证两个文本垂直方向对齐 */
  align-items: baseline;
}

/* 可选：如果不需要左侧文本被压缩换行，可添加该规则 */
.a {
  flex-shrink: 0;
}

原理解释 #

• 两个元素总宽度小于容器宽度时，justify-content: space-between 会自动实现左侧元素靠左、右侧元素靠右的布局效果，符合默认展示要求。
• 当容器剩余空间不足以放下右侧的Text B时，Text B会自动换行到新行。因为新行仅存在Text B一个子元素，justify-content: space-between 不会产生额外的左侧间隔，元素会默认对齐到行的左侧，正好满足换行后的对齐需求。

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