具有灵活变动宽度特性的布局，也被称为流式布局，这种布局会根据网页浏览器的窗口大小相应地调整自己的宽度。在这类布局中，容器中的主体部分的宽度以当前浏览器的窗口宽度为基准，按照一定的百分比进行定义。当浏览器的尺寸发生变化时，布局也发生变化，因为用户调整窗口的操作已经改变了布局所依赖的基准。换句话说，这类布局中各区域的宽度会随着用户浏览器窗口的调整自动变化。所以，如果用户觉得正在浏览的文章的行宽不是很合适，通过简单地调整窗口尺寸，内容区域就会自动进行调整。

这类布局中，布局元素之间的关系至关重要，因为布局中子元素的宽度是以父元素的百分比设置的（不是相邻的元素）。例如，如果布局容器的宽度设置为90%（他的父元素为浏览器窗口），导航区的宽度设置为80%，那么导航区的宽度就是浏览器宽度的72%（1×0.9×0.8=0.72）。由此可见，设计流式布局需要对设计的结构有深度的了解。对设计师而言，过程也许痛苦，但是成功的设计会让网站更加灵活地面对使用不同终端的用户[注释]。

流式布局能够尽可能多地使用浏览器的可用空间，设计师可以有足够的空间来平均排布页面中的内容。设计得当的布局可以保持空白区域始终一致，不管浏览器或者屏幕的分辨率如何变化，这样的设计显得更加一致并且对用户友好。同时，这类布局也消除了低分辨率显示器上刺眼的水平滚动条。

和固定宽度布局不同，流式布局赋予用户更大的自由来调整布局的宽度。

和固定宽度布局不同，流式布局赋予用户更大的自由来调整布局的宽度。伴随着这种自由，青岛网站设计师将严格、一致的像素布局转移到一种更加灵活（也因此更有风险）的环境中来。这时对网站中特定元素之间比例关系的定义变得相当抽象和困难。这也正是多数设计师避免使用流式布局的原因，这种布局剥夺了设计师在像素级精度上预测定位元素的能力。

设计师在用相对值替代绝对值的过程中，经常将这些值进位或者去位（例如，将15.43333% 变成15.43% 或者15%），这样设计就变得更加不精确 。最后的设计也许在一些低分辨率屏幕上表现良好，但是在高分辨率情况下会发生奇怪的现象，诸如布局中显著的空白、内容区太宽难以阅读等。

事实上，内容区过宽的结果是流式布局最显著的缺点。由于内容区的宽度取决于用户视窗的大小，宽屏的用户会发现每一行都是如此的长，以至于阅读起来很不舒服。如果一个使用流式布局的页面中没有这么多的文字，用户将看到孤零零的一行字，侧边栏高得非常不协调，周边还充斥着大量的空白。

为了获得最佳的阅读效果（每行47 到86 个英文字母），设计师通常为内容区 #content-block[注释]设置在此基础上加10% 的宽度。除非设计的可读性会在低分辨率情况下变得很糟糕，一般不会设置最小宽度。

在CSS 中，使用CSS 属性“max-width”来定义布局的最大宽度。几乎所有

的主流浏览器都支持这个属性（IE 7+、Firefox 1+、Safari 2+、Opera 9.2+），当然IE 除外。

为解决这个问题，设计师通常会在内容区域设置一个最大宽度，以此来将布局限制到一个较为理想的宽度。

代码检查用户相对浏览器宽度的字体尺寸设置（以pt 为单位）。Tofte 认为，不管在什么情况下，使用默认12pt 的字体时，500px（像素）要比30em 宽，所以上面的代码中使用了30em 作为布局的宽度。

其原理是，如果内容部分的宽度大于500 像素与12 的比值乘以用户字体的设置，就将宽度设置为30em。相反的情况下，让宽度保持自动（ 使用了“auto”属性） 。

由于动态样式属性没有包含在W3C 的CSS2 规范中，使用这种方法会让样式表无法通过验证。读者可以根据自身情况使用，能够为市场上仍然是最流行的浏览器提供带有最小宽度和最大宽度的流式布局，付出这点代价也许是微不足道的。

Clearleft 山东网站制作就是使用了自适应宽度布局的例子。下面两幅图展示了网站在1280 和800 像素情况下的表现。注意看内容区域是如何自动调整“We makewebsites better”这句话的，在1280 像素时的两行变成了800 像素时的三行。

在为自适应布局选择一个合适的宽度时，使用“width ：auto”或者其他的百分比值会非常合理，这样确保了布局自动占据浏览器的可用空间。对于最小宽度，可以使用像素值，例如760（像素）。这个限制确保了所有自适应布局即使在最低的分辨率情况下仍保持可读。至于最大宽度，通常的做法是使用em 值（例如90em），这样就能在文本宽度不失控的情况下，保持不同分辨率情况下的稳定。让人高兴的是，如果用户调整浏览器的字体设置，最大宽度会发生相应的变化。

一个经典的计算这个比例的方法是，通过将给定像素高度元素与容器的尺寸相除得到的字体大小（即上下文）。

在实现自适应布局时，我们使用了相对值来表示外边距和内边距（当时，是相对于视口的宽度），这样当窗口尺寸变化时，外边距和内边距同样发生变化，同时保持了比例和尺寸一直灵活。这种技术被称为“concertina padding”，由Richard Rutter 提出（“Web Standards Group ：Ten Questions for RichardRutter”, webstandardsgroup.org）。使用这种技术后，当页面尺寸改变时，外边距和内边距同样发生变化，同时会检查内容区以及文本行的长度。