Flexbox嵌套子元素独立布局：孙元素1居左上，孙元素2全屏居中

要让grandchild1固定在.child1的左上角，同时让grandchild2居中且撑满整个宽度，核心是让grandchild1脱离正常布局流，不再挤压grandchild2的空间。可以通过相对定位+绝对定位快速实现，具体修改如下：

修改后的CSS代码 #

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

.child1 {
  background-color: blue;
  height: 10rem;
  display: flex;
  justify-content: center;
  align-items: center;
  /* 添加相对定位，作为绝对定位的参考容器 */
  position: relative;
}

.child2 {
  background-color: red;
  height: 10rem;
}

.child3 {
  background-color: green;
  height: 10rem;
}

.grandchild1 {
  background-color: yellow;
  /* 绝对定位到容器左上角 */
  position: absolute;
  top: 0;
  left: 0;
}

.grandchild2 {
  background-color: purple;
  border: 1px black solid;
  flex-grow: 1;
  text-align: center;
}

改动说明 #

1. 给.child1添加position: relative：让它成为内部绝对定位元素的参考基准，确保grandchild1相对于.child1定位，而非整个页面。
2. 给.grandchild1设置position: absolute; top: 0; left: 0;：让它脱离正常布局流，直接固定在.child1的左上角，不再占用行内空间，这样grandchild2就能不受干扰地撑满宽度并保持居中。

替代方案：使用Grid布局 #

如果更倾向于Grid布局，也可以调整.child1的布局方式，效果一致：

.child1 {
  background-color: blue;
  height: 10rem;
  /* 改用Grid布局实现居中 */
  display: grid;
  place-items: center;
  position: relative;
}

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