如何让Flex容器内弹性盒子自动适配并避开右上角固定盒子

因为绝对定位的certain-box不占据文档流，默认情况下弹性盒子不会自动避开它，这里提供两种可靠的解决方法：

方法一：利用容器padding预留空间 #

给flex容器添加对应静态盒子尺寸的padding，让弹性盒子在padding内部的区域排列，同时调整静态盒子的定位使其覆盖padding区域：

修改后的CSS代码：

html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
}

.flex-container {
  width: 400px;
  height: 400px;
  display: flex;
  flex-wrap: wrap;
  position: relative;
  /* 预留对应静态盒子的空间 */
  padding-top: 40px;
  padding-right: 80px;
  box-sizing: border-box; /* 确保padding不会扩大容器尺寸 */
}
.flex-box {
  box-sizing: border-box;
  border: 1px solid #000;
}
.certain-box {
  width: 80px;
  height: 40px;
  position: absolute;
  right: 0;
  top: 0;
  background: #fff;
  font-size: 12px;
  box-shadow: rgba(0, 0, 0, 0.25) 0px 54px 55px, rgba(0, 0, 0, 0.12) 0px -12px 30px, rgba(0, 0, 0, 0.12) 0px 4px 6px, rgba(0, 0, 0, 0.17) 0px 12px 13px, rgba(0, 0, 0, 0.09) 0px -3px 5px;
}

方法二：添加占位元素占据空间 #

在flex容器内添加一个和静态盒子尺寸一致的占位元素，让弹性布局自动避开这个位置，再用静态盒子覆盖占位元素：

修改后的HTML代码：

<div class="flex-container">
  <div class="placeholder-box"></div>
  <div class="certain-box">
    The Certain Box
  </div>
</div>

新增并修改的CSS代码：

/* 原有CSS保留，新增以下样式 */
.placeholder-box {
  width: 80px;
  height: 40px;
  margin-left: auto; /* 将占位元素推至容器右上角 */
  visibility: hidden; /* 隐藏占位元素，仅占据布局空间 */
}

两种方法都能实现弹性盒子避开静态盒子的需求，方法一无需修改HTML结构，更简洁；方法二适合无法调整容器padding的场景。

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