为何我的Flexbox未生成三个盒子却出现一条细长线条？

AI 小北

2026-8-19

问题解决方法

你的三个彩色盒子只显示细长边框，核心问题是**.header_boxes没有设置为flex容器**，同时它在父flex容器里没有足够宽度空间，导致内部子元素无法正常展开。

具体修正步骤：

给.header_boxes添加display: flex，让内部三个div变成flex项，才能生效flex:1属性平分空间
给.header_boxes设置flex:1，让它在.header容器里占据剩余全部空间
调整.header的布局方式，用padding替代子元素的margin，让整体布局更可控

修正后的代码：

CSS 代码

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box; /* 避免边框撑大元素尺寸 */
}

.header {
  width: 100%;
  height: 300px;
  background-color: #1F2937;
  position: absolute;
  display: flex;
  align-items: flex-start; /* 子元素顶部对齐 */
  padding: 20px 100px; /* 统一内边距，替代子元素的margin */
  gap: 20px; /* logo和盒子容器之间留间隙 */
}

.header_logo {
  width: 120px;
  font-size: 24px; /* 调整字体大小至合理视觉比例 */
  color: white;
  font-family: "Roboto";
  white-space: nowrap;
}

.header_boxes {
  display: flex; /* 关键：设置为flex容器 */
  flex: 1; /* 占据header剩余所有空间 */
  gap: 15px; /* 三个盒子之间留间隙 */
}

.header_boxes div {
  background: peachpuff;
  border: 4px solid brown;
  height: 80px;
  flex: 1 1 auto; /* 平分父容器空间 */
}

HTML 代码（补全闭合标签，结构本身无问题）

<div class="header">
  <div class="header_logo">
    <h1>Header Logo</h1>
  </div>

  <div class="header_boxes">
    <div class="one"></div>
    <div class="two"></div>
    <div class="three"></div>
  </div>
</div>