如何用Flex Row布局实现三元素特定排列（无内部容器）

直接上可行方案，核心是利用flex-wrap: wrap配合margin-left: auto实现元素定位，同时给容器设置明确高度以支撑子元素的百分比高度：

HTML结构（保持你要求的原始结构） #

<div id="container">
  <div>A</div>
  <div>B</div>
  <div>C</div>
</div>

CSS实现 #

#container {
  display: flex;
  flex-wrap: wrap;
  height: 400px; /* 可按需调整，也可用百分比，需确保父级有明确高度 */
  width: 100%;
  border: 2px solid #333;
  box-sizing: border-box;
}

#container > div:nth-child(1) {
  width: 20%;
  height: 100%;
  background: #f5a9a9;
}

#container > div:nth-child(2),
#container > div:nth-child(3) {
  width: 80%;
  height: 50%;
  margin-left: auto; /* 关键：强制元素填充A右侧的80%空间 */
  background: #a9d1f5;
  box-sizing: border-box;
  border-top: 2px solid #333;
}

#container > div:nth-child(2) {
  border-top: none; /* 去掉B的顶部边框，避免和容器边框重复 */
}

关键逻辑说明 #

1. 容器启用默认的flex-direction: row，并设置flex-wrap: wrap允许元素换行
2. 元素A占20%宽度、100%高度，占据容器左侧整列
3. 元素B和C各占80%宽度、50%高度，通过margin-left: auto强制排列在A的右侧：
   • B填充第一行A右侧的剩余空间，占据上半部分高度
   • 容器高度固定的情况下，B占满50%高度后，C自动换行，同样通过margin-left: auto定位到右侧，占据下半部分高度
4. 边框仅为直观展示布局结构，可按需移除

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