Flex布局实现父容器内面包屑居中且左侧可变宽度logo不重叠

实现方案 #

核心思路 #

使用CSS Grid布局实现三列结构，既保证面包屑相对父容器完全居中，又能自动适配左侧logo的可变宽度，两者不会发生重叠。

修改后CSS代码 #

body {
  margin: 0;
}

#container {
  background: red;
  /* 替换原flex布局为grid */
  display: grid;
  /* 三列配置：左右列宽度自适应内容、中间列占剩余全部空间，保证左右留白对称 */
  grid-template-columns: fit-content(100%) 1fr fit-content(100%);
  align-items: center;
  height: 50px;
  padding: 0 50px;
}

#logo {
  height: 50px;
  width: 50px; /* 此处宽度可任意修改，布局会自动适配 */
  background-color: blue;
  /* 移除原绝对定位相关属性 */
}

#breadcrumb {
  width: 200px;
  height: 20px;
  background-color: green;
  /* 面包屑在中间列内居中 */
  justify-self: center;
}

修改后HTML代码 #

无需新增元素，原有结构保持不变即可：

<div id="container">
  <div id="logo"></div>
  <div id="breadcrumb"></div>
</div>

方案说明 #

1. 移除了logo的绝对定位属性，避免logo脱离文档流，让面包屑可以自动识别logo的边界
2. 父容器改为Grid布局后，左右列宽度会根据logo的实际宽度自动调整，始终保持对称
3. 面包屑在中间列内居中，天然实现了相对于整个父容器的居中效果，无论logo宽度如何变化，都不会和面包屑发生重叠

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