本文详解如何用 css flexbox 精确构建响应式两行布局：首行分为 70% 和 30% 宽度的两个并列区域，第二行单列横跨全宽，并解决因 flex 项默认行为导致的内容错位问题。
本文详解如何用 css flexbox 精确构建响应式两行布局：首行分为 70% 和 30% 宽度的两个并列区域，第二行单列横跨全宽，并解决因 flex 项默认行为导致的内容错位问题。
要实现“第一行两列（70% + 30%）、第二行一列（100% 通栏）”的布局，关键在于正确理解并应用 Flexbox 的 flex 属性与容器的流式行为。原代码中 .div { flex-basis: 50% } 强制所有子项等宽，且未控制换行逻辑，导致第三项无法自动独占一行；同时 margin-left: 100px 等硬编码偏移会破坏弹性布局的自适应性，引发内容错位。
✅ 正确方案如下：
HTML 结构（语义清晰、顺序合理）：
<div class="wrapper">
<div class="col-70">Hi! <?php echo htmlspecialchars($_SESSION["username"]); ?> Welcome to HMIS</div>
<div class="col-30">hhhhh</div>
<div class="col-full">
<a href="bill.php" class="logo me-auto">
<img src="assets/img/logo.png" style="max-width:90%" style="max-width:90%" alt="HMIS Logo"></a>
</div>
</div>
CSS 样式（精准控制比例与换行）：
body {
background-image: url("1.JPG");
background-repeat: repeat-x;
}
.wrapper {
display: flex;
flex-wrap: wrap;
gap: 1rem; /* 推荐添加间隙，提升可读性 */
}
.col-70 {
flex: 0 0 70%; /* 不伸缩、不收缩、基础宽度为 70% */
color: white;
}
.col-30 {
flex: 0 0 30%; /* 同理，严格限定为 30% */
}
.col-full {
flex: 0 0 100%; /* 强制换行并占满整行 */
}
? 关键说明：
- flex: 0 0 70% 是 flex-grow: 0（不放大）、flex-shrink: 0（不缩小）、flex-basis: 70%（主轴基准尺寸）的简写，确保比例精确且不受内容长度干扰；
- flex-wrap: wrap 允许子项换行，而 .col-full 的 flex-basis: 100% 会自然触发换行（因单行剩余空间不足）；
- 避免使用 margin-left 等绝对定位方式——Flexbox 布局应通过 gap、justify-content 或 flex 属性控制间距与对齐；
- 若需更高阶控制（如垂直居中、响应式断点），可结合 align-items 或媒体查询，或直接升级为 CSS Grid（例如 grid-template-areas 更直观表达二维结构）。
? 进阶建议：
对于复杂页面布局，CSS Grid 往往比 Flexbox 更直观。例如等效 Grid 写法：
.wrapper {
display: grid;
grid-template-columns: 70% 30%;
grid-template-rows: auto auto;
grid-template-areas:
"header header"
"main sidebar"
"footer footer";
}
.col-full { grid-area: footer; }
但就当前需求而言，上述 Flexbox 方案简洁、兼容性好（支持 IE10+），是首选实践。
