流式布局（Fluid Grid Layout）

流式布局是一种基于百分比而非固定像素的布局方式，它使网页元素能够根据父容器或视口的大小自动伸缩，从而实现更自然的自适应效果。

核心原理

传统布局中通常使用固定像素（px）来设定元素宽度，而流式布局使用相对单位（如 %、em、rem），使得元素能够根据浏览器窗口的变化自动调整尺寸。

基本示例

<div class="container">
  <div class="column">Column 1</div>
  <div class="column">Column 2</div>
</div>

.container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
}

.column {
  float: left;
  width: 50%; /* 使用百分比代替固定像素 */
  padding: 1em;
  box-sizing: border-box;
}

与响应式布局配合使用

流式布局可以与媒体查询配合，实现更细致的自适应：

.column {
  width: 100%;
}

@media (min-width: 768px) {
  .column {
    width: 50%;
  }
}

使用相对单位的优势

• 页面能根据不同分辨率自然拉伸或压缩
• 更适合多语言、多尺寸文本的展示
• 更好地适配大部分现代设备

注意事项

• 需要配合 box-sizing: border-box 来控制元素实际尺寸
• 百分比布局可能会受嵌套结构影响，需要合理安排父子关系
• 和图片、媒体元素自适应配合使用时，需设置 max-width: 100%

总结

流式布局提供了一种简单高效的方式，使页面在不依赖 JavaScript 的情况下也能进行基础自适应，是响应式与自适应设计的底层构建方式之一。