本教程详细讲解如何利用css flexbox实现响应式两列布局，并在不同屏幕尺寸下保持列的等宽堆叠效果。针对包含动态内容（如视频）的场景，我们将结合javaScript动态获取并同步两列的高度，确保在小屏幕堆叠时，视觉上保持一致的等高体验，从而提升用户界面的适配性和美观性。
在现代网页设计中，创建响应式布局是核心要求之一。当我们需要展示两列内容，例如一列是视频，另一列是文本时，确保它们在不同屏幕尺寸下（尤其是从小屏幕横向布局变为纵向堆叠时）能够保持等宽且等高，是一个常见的挑战。本文将详细介绍如何结合使用CSS Flexbox和javascript来优雅地解决这一问题。
一、 Flexbox实现基础两列布局与响应式堆叠
CSS Flexbox是实现复杂布局的强大工具，它能轻松创建弹性容器，并控制其子元素的对齐、方向和大小。
1. 初始Flexbox布局
首先，我们利用Flexbox创建一个两列布局。父容器 .row 设置为 display: flex，子元素 .column 则通过 flex: 1 占据等宽空间。
立即学习“Java免费学习笔记（深入）”；
.page-wrapper2 { margin: 0px; border: 2px solid black; /* 方便观察布局 */ } .row { display: flex; flex-direction: row; /* 默认横向排列 */ flex-wrap: wrap; /* 允许子元素换行 */ width: 100%; } .column { display: flex; /* 列内部也使用flex，方便内容对齐 */ flex-direction: column; flex-basis: 100%; /* 默认情况下，列可以占据100%宽度 */ flex: 1; /* 让两列平分可用空间 */ } /* 具体内容容器的样式 */ .blue-column { background-color: blue; /* 测试背景色 */ height: 100%; /* 尝试让内容填充父容器高度 */ padding: 40px; } .red-column { background-color: red; /* 测试背景色 */ height: 100%; /* 尝试让内容填充父容器高度 */ padding: 40px; }
2. 媒体查询实现堆叠效果
为了在小屏幕上实现两列堆叠，我们使用媒体查询改变 .row 的 flex-direction。当屏幕宽度小于或等于 800px 时，将 flex-direction 从 row 改为 column。
@media screen and (max-width: 800px) { .row { flex-direction: column; /* 小屏幕下改为纵向堆叠 */ } }
3. html结构
<div class='page-wrapper2'> <div class='row'> <div class='column'> <div class='blue-column' id="blue-column"> <!-- 视频内容 --> <iframe width="100%" height="315" src="https://www.youtube.com/embed/YIOb5_WCsOY" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe> </div> </div> <div class='column'> <div class='red-column' id="red-column"> <!-- 文本内容 --> <h2>Red Column</h2> <p>Text in Red Two</p> </div> </div> </div> </div>
注意： 在这里，iframe 的 height 属性被明确设置为 315。这意味着 blue-column 的高度将由这个固定高度的 iframe 及其自身的 padding 决定。
二、 解决动态内容导致的等高问题：JavaScript同步高度
尽管Flexbox能够很好地处理响应式布局和堆叠，但当两列内容高度不一致（尤其是其中一列包含视频等动态或具有固定纵横比的内容时），简单地设置 height: 100% 可能无法达到预期的等高效果。这时，我们需要JavaScript来动态地同步两列的高度。
1. 问题分析
在上述HTML中，blue-column 包含一个 height=”315″ 的 iframe。它的实际渲染高度是 315px 加上 blue-column 的 padding。而 red-column 的高度则由其内部的文本内容决定。在横向布局时，Flexbox的 align-items: stretch (默认值) 会尝试让所有Flex子项等高。但在纵向堆叠时，每个堆叠的列会独立占据其内容所需的高度，导致视觉上不再等高。
2. JavaScript解决方案
我们可以通过JavaScript监听窗口大小变化事件 (window.onresize)，在每次窗口尺寸变化时，获取其中一列（例如 blue-column）的计算高度，然后将这个高度应用到另一列（red-column）上。
window.onresize = (event) => { // 获取 blue-column 元素 const bluecolumn = document.querySelector('#blue-column'); // 获取 blue-column 的最终计算样式（包括 padding, border 等） const elementComputedStyle = window.getComputedStyle(bluecolumn); // 获取 red-column 元素 const redcolumn = document.querySelector('#red-column'); // 将 blue-column 的计算高度和宽度应用到 red-column redcolumn.style.height = elementComputedStyle.height; redcolumn.style.width = elementComputedStyle.width; }; // 页面加载时也执行一次，确保初始状态下高度同步 document.addEventListener('domContentLoaded', () => { const bluecolumn = document.querySelector('#blue-column'); const elementComputedStyle = window.getComputedStyle(bluecolumn); const redcolumn = document.querySelector('#red-column'); redcolumn.style.height = elementComputedStyle.height; redcolumn.style.width = elementComputedStyle.width; });
代码解释：
- window.onresize: 这是一个事件处理器，当浏览器窗口大小被调整时触发。
- document.querySelector(‘#blue-column’): 通过 id 属性获取 blue-column 元素。
- window.getComputedStyle(bluecolumn): 这是一个关键的API。它返回一个对象，包含元素所有最终计算后的CSS属性值。这包括了浏览器解析所有样式规则后实际应用于元素的样式，例如，即使你在CSS中设置了 height: 100%，它也会返回一个像素值。
- elementComputedStyle.height: 获取 blue-column 的实际计算高度（像素值）。
- redcolumn.style.height = …: 将获取到的高度值赋给 red-column 的 style.height 属性，从而动态地设置其高度。
- DOMContentLoaded 事件监听：确保在DOM内容加载完毕后，也执行一次高度同步，以保证页面初次加载时的正确显示。
通过这种方式，无论 blue-column 的内容如何变化（只要它的高度能够被浏览器计算出来），red-column 都会动态地调整自身高度来与之匹配，从而实现等高效果。
三、 注意事项与总结
- iframe 高度处理： 在本教程的示例中，iframe 的高度被设置为固定值 315px。如果希望视频能够响应式地调整高度以保持其纵横比，通常需要使用CSS技巧（如 padding-bottom hack）将 iframe 放置在一个具有特定纵横比的容器中，并设置 iframe 自身 position: absolute; width: 100%; height: 100%;。在这种情况下，blue-column 的高度将由其父容器的纵横比决定，JavaScript仍然可以读取其计算高度并同步给 red-column。
- JavaScript onresize 性能： window.onresize 事件在窗口大小调整时会频繁触发。对于复杂的页面或性能敏感的应用，建议对事件进行“节流”（throttle）或“防抖”（debounce）处理，以限制函数执行的频率，避免不必要的性能开销。
- CSS padding 的影响： padding 会增加元素的总尺寸。在计算高度时，getComputedStyle 会返回包含 padding 在内的最终高度。确保你的布局设计考虑了 padding 对等高效果的影响。
- 内容溢出： 如果 red-column 的内容在被强制设置为与 blue-column 相同的高度后溢出，你需要考虑如何处理溢出内容（例如使用 overflow: auto 或 text-overflow: ellipsis）。
通过结合Flexbox的强大布局能力和JavaScript的动态计算与同步特性，我们可以构建出高度灵活且视觉一致的响应式两列布局。这种方法特别适用于包含不同类型内容（如媒体和文本）的列，确保了在各种设备和屏幕尺寸下都能提供优质的用户体验。