HTML布局方式有哪些常见类型？

本文共计645个文字，预计阅读时间需要3分钟。

适用于以下线性排列场景，控制逻辑清晰，响应式适配成本低。

• 父容器必须设 display: flex，否则子元素上写 flex: 1 或 justify-content 全无效
• flex-direction: column 在移动端首屏堆叠时比 row 更自然
• 侧边栏固定宽 + 主内容自适应？写成 sidebar { flex: 0 0 240px; } + main { flex: 1; }
• 含长文本或 URL 的子元素容易撑破容器，加 min-width: 0 才能触发 overflow: hidden

用 display: grid 做二维区域划分

适合仪表盘、杂志式多模块、带固定头部/侧边+滚动内容区等需要行列精确定位的场景。