Flex布局下如何将HTML后置元素置于前置元素左侧并联动宽度？

要实现HTML结构中靠后的子容器（.second）显示在第一个子容器（.first）左侧，且.first文本变长时推动.second左移，可以通过Flex布局的order属性调整显示顺序，配合justify-content和flex-shrink实现宽度变化的推动效果，具体修改如下：

修改后的CSS代码 #

.main {
  height: 200px;
  width: 500px;
  background-color: lightblue;
  display: flex;
  justify-content: flex-end; /* 让子元素整体靠右排列 */
}

.first {
  height: 40px;
  background-color: skyblue;
  margin: 10px;
  flex-shrink: 0; /* 禁止.first收缩，宽度随内容自适应 */
}

.second {
  height: 40px;
  background-color: crimson;
  margin: 10px;
  order: -1; /* 将.second的显示顺序提前到.first之前 */
}

效果说明 #

1. order: -1：Flex子元素默认order值为0，给.second设置-1后，它会在视觉上排在.first左侧，无需修改HTML结构。
2. justify-content: flex-end：让两个子元素整体靠右对齐，当.first文本变长、宽度增加时，会向左扩展并推动.second同步左移。
3. flex-shrink: 0：确保.first不会因容器空间不足而收缩，始终保持内容所需的宽度，保证推动效果生效。

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