CSS Flexbox布局技术问询：如何将一行分为两列并适配786px、768px屏幕宽度
2026-4-29
解决方案：Flexbox 响应式布局调整
针对你的两个问题，我会一步步帮你解决，先从你的具体代码入手，再解释通用的实现思路。
一、解决你的布局难题（大屏幕box3/box4同行，小屏幕全屏垂直排列）
你的核心需求很明确：
- 大屏幕（>768px）：box1、box2、box5各占一行，box3和box4在同一行平分宽度
- 小屏幕（≤768px）：所有box都单独占一行（全屏宽度）
修改步骤：
- 调整HTML结构：把box3和box4放到一个新的flex容器里，这样我们可以单独控制它们的排列方式：
<!DOCTYPE html> <html lang="en"> <head> <link rel="stylesheet" href="style.css"> <title>My CSS is Easy</title> </head> <body> <div class="container-1"> <div id="box-1"> header </div> <div id="box-2"> hero </div> <!-- 新增子容器包裹box3和box4 --> <div class="container-2"> <div id="box-3"> content </div> <div id="box-4"> sidebar </div> </div> <div id="box-5"> footer </div> </div> </body> </html>
- 更新CSS样式：
- 给新的
container-2设置flex布局，默认横向排列，让box3和box4平分宽度 - 新增媒体查询，在屏幕≤768px时，把
container-2改为纵向排列，让box3和box4各自占满全屏宽度
- 给新的
*{ padding: 0; margin: 0; } body, html, .container-1{ width: 100%; height: 100%; } /* 主容器保持纵向排列 */ .container-1{ display: flex; flex-direction: column; } /* 子容器默认横向排列，让box3和box4同行 */ .container-2{ display: flex; flex-direction: row; } #box-1{ flex:1; background: #00B7EB; text-transform: uppercase; text-align: center; } #box-2{ flex:1; background: #FF0000; text-transform: uppercase; text-align: center; } #box-3{ flex:1; background: #00FF00; text-transform: uppercase; text-align: center; } #box-4{ flex:1; background: #800080; text-transform: uppercase; text-align: center; } #box-5{ flex:1; background: #444444; text-transform: uppercase; text-align: center; } /* 媒体查询：小屏幕时所有box垂直排列 */ @media (max-width: 768px) { .container-2{ flex-direction: column; } }
二、通用思路：Flexbox实现“一行分两列+小屏幕全屏宽度”
如果要通用实现这个效果，核心逻辑就是嵌套Flex容器：
- 创建一个父级flex容器（纵向排列），用来承载各个独立区块
- 把需要同行的两个元素放到一个子flex容器中，子容器默认横向排列（实现两列平分空间）
- 通过媒体查询，在小屏幕时将子容器的
flex-direction改为column，让两个元素各自占满全屏宽度
关键要点：
- 使用
flex:1让每个区块自动填充可用空间（平分宽度/高度） - 媒体查询的断点可以根据产品需求灵活调整（768px是移动端适配的常用断点）
- 嵌套Flex是实现复杂响应式布局的常用技巧，能灵活控制不同区块的排列组合
内容的提问来源于stack exchange，提问作者Asante Michael
