如何修改CSS使template元素匹配flex容器内elements的定位与尺寸？

目标布局 #

======================================|--------|
            Header                    |        |    
======================================| edge-1 | 
     |                                |--------|
     |                                |        | 
Nav  |         Information            | edge-2 | 
     |                                |--------|
     |                                |        | 
     |                                | edge-3 |
======================================|        |
        Footer                        |        | 
=======================================--------|        

元素尺寸要求 #

• 左侧容器（Header、Nav、Information、Footer）占父容器宽度的4/5
• 右侧容器（edge-1、edge-2、edge-3）占父容器宽度的1/5
• Nav占父容器宽度的1/4
• Information占父容器宽度的3/4
• Header占父容器高度的1/5
• Footer占父容器高度的1/5

现有只读代码 #

HTML代码 #

<div>
  <div class="Holder">
    <div class="elements">
      <div class="left-portion">
        <div class="item header" data-title="header"></div>
        <div class="content">
          <div class="item nav" data-title="nav"></div>
          <div class="item information" data-title="information"></div>
        </div>
        <div class="item footer" data-title="footer"></div>
      </div>

      <div class="right-portion">
        <div class="item edge-1" data-title="edge-1"></div>
        <div class="item edge-2" data-title="edge-2"></div>
        <div class="item edge-3" data-title="edge-3"></div>
      </div>
    </div>
    <div class="template">
      <div class="item item-1" data-title="header"></div>
      <div class="item item-2" data-title="nav"></div>
      <div class="item item-3" data-title="information"></div>
      <div class="item item-4" data-title="footer"></div>
      <div class="item item-5" data-title="edge-1"></div>
      <div class="item item-6" data-title="edge-2"></div>
      <div class="item item-7" data-title="edge-3"></div>
    </div>
  </div>
</div>

初始CSS代码 #

body {
  margin: 0;
  font-family: Arial, sans-serif;
}

.holder {
  display: flex;
  flex-direction: column;
  height: 100vh;
}

.elements {
  display: flex;
  flex: 1;
}

.left-portion {
  display: flex;
  flex-direction: column;
  flex: 4;
}

.right-portion {
  display: flex;
  flex-direction: column;
  flex: 1;
}

.header {
  flex: 1;
  background-color: #f1f1f1;
}

.footer {
  flex: 1;
  background-color: #f1f1f1;
}

.content {
  display: flex;
  flex: 3;
}

.nav {
  flex: 1;
  background-color: #e1e1e1;
}

.information {
  flex: 3;
  background-color: #d1d1d1;
}

.item {
  border: 1px solid #ccc;
  margin: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.edge-1,
.edge-2,
.edge-3 {
  flex: 1;
  background-color: #c1c1c1;
}

测试要求 #

测试脚本要求.template下的所有元素必须处于flex容器Holder内，且与.elements下对应元素的位置、尺寸偏差不超过2px，代码如下：

it.each([
  'header', 'nav', 'information', 'footer', 'edge-1', 'edge-2', 'edge-3'
])('verify element %s ', async (element) => {
  const elements = await driver.findElement(By.css(`.elements [data-title="${element}"]`))
  const template = await driver.findElement(By.css(`.template [data-title="${element}"]`))

  const eRect = await elements.getRect()
  const tRect = await template.getRect()

  const deviation = 2
  expect(Math.abs(tRect.y - eRect.y)).toBeLessThanOrEqual(deviation)
  expect(Math.abs(tRect.x - eRect.x)).toBeLessThanOrEqual(deviation)

  expect(Math.abs(tRect.width - eRect.width)).toBeLessThanOrEqual(deviation)
  expect(Math.abs(tRect.height - eRect.height)).toBeLessThanOrEqual(deviation)
})

修改后的CSS方案 #

* {
  box-sizing: border-box; /* 确保边框和内边距不影响元素尺寸计算 */
}

body {
  margin: 0;
  font-family: Arial, sans-serif;
}

/* 修正类名大小写：HTML中是Holder，原CSS写成了小写holder */
.Holder {
  display: flex;
  flex-direction: column;
  height: 100vh;
  position: relative; /* 作为.template绝对定位的参考容器 */
}

.elements {
  display: flex;
  flex: 1;
}

.left-portion {
  display: flex;
  flex-direction: column;
  flex: 4; /* 占父容器4/5宽度 */
}

.right-portion {
  display: flex;
  flex-direction: column;
  flex: 1; /* 占父容器1/5宽度 */
}

.header {
  flex: 1; /* 占父容器1/5高度 */
  background-color: #f1f1f1;
}

.footer {
  flex: 1; /* 占父容器1/5高度 */
  background-color: #f1f1f1;
}

.content {
  display: flex;
  flex: 3; /* 占父容器3/5高度 */
}

.nav {
  flex: 1; /* 占左侧容器1/4宽度 */
  background-color: #e1e1e1;
}

.information {
  flex: 3; /* 占左侧容器3/4宽度 */
  background-color: #d1d1d1;
}

/* 移除margin避免影响元素位置和尺寸，改用padding保留内部间距 */
.item {
  border: 1px solid #ccc;
  padding: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.edge-1,
.edge-2,
.edge-3 {
  flex: 1; /* 平分右侧容器高度 */
  background-color: #c1c1c1;
}

/* 配置.template的布局，完全匹配.elements的结构 */
.template {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}

/* 定位.template中的header元素 */
.template [data-title="header"] {
  flex: 1;
  width: calc(100% * 4 / 5);
  order: 1;
}

/* 定位.template中的footer元素 */
.template [data-title="footer"] {
  flex: 1;
  width: calc(100% * 4 / 5);
  order: 3;
}

/* 配置中间区域的横向布局 */
.template [data-title="nav"],
.template [data-title="information"],
.template [data-title="edge-1"],
.template [data-title="edge-2"],
.template [data-title="edge-3"] {
  flex: 3;
  display: flex;
  order: 2;
}

/* 定位.template中的nav元素 */
.template [data-title="nav"] {
  width: calc(100% * 4 / 5 * 1 / 4);
}

/* 定位.template中的information元素 */
.template [data-title="information"] {
  width: calc(100% * 4 / 5 * 3 / 4);
}

/* 配置右侧edge元素的纵向布局 */
.template [data-title="edge-1"],
.template [data-title="edge-2"],
.template [data-title="edge-3"] {
  width: calc(100% * 1 / 5);
  flex-direction: column;
}

/* 平分右侧三个edge的高度 */
.template [data-title="edge-1"] { flex: 1; }
.template [data-title="edge-2"] { flex: 1; }
.template [data-title="edge-3"] { flex: 1; }

关键修改说明 #

1. 修正类名大小写：HTML中容器类名为Holder，原CSS误写为小写.holder，导致布局规则失效，修正后确保Flex容器规则生效。
2. 全局盒模型设置：添加box-sizing: border-box，确保元素的边框和内边距不会额外占用空间，保证尺寸计算准确。
3. 调整元素间距：移除.item的margin（会导致元素位置偏移），改用padding保留内部间距，避免影响测试的位置和尺寸校验。
4. 定位.template容器：将.template设置为绝对定位，完全覆盖在.Holder内部，确保其元素处于要求的Flex容器范围内。
5. 复刻.elements布局：通过flex属性、order属性和宽度计算，让.template内的扁平元素完全复刻.elements的嵌套Flex布局，保证每个元素的位置和尺寸与目标元素一致。

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