flex布局有同级元素时如何让div撑满父级并按父级宽度居中内容

最简便的实现方式是利用绝对定位让child1的内容宽度直接对齐父容器总宽度，全程不使用padding或margin属性：

<div title='parent' style='display: flex; width: 200px; position: relative;'>
  <div title='child1' style='border:1px solid black; flex: 1;'>
    <span style='position: absolute; left: 0; right: 0; text-align: center;'>
      long
    </span>
  </div>
  <div title='child2' style='border:1px solid red; width: 40px; flex-shrink: 0;'>
  </div>
</div>

原理解释 #

• 给父容器添加position: relative，作为内部绝对定位元素的参照基准
• 将child1的内容套入任意行内容器（示例用span），设置为绝对定位后配置left:0; right:0，此时该容器的宽度会自动和父容器总宽度完全一致
• 给内容容器加text-align: center，内容的居中基准就是父容器的总宽度，而非child1自身的宽度
• 额外给child2添加flex-shrink: 0可避免flex布局自动压缩child2的宽度，属于兼容优化，不影响核心逻辑

这种方法不需要提前知道child2的宽度，适配性更强。

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