CSS3弹性伸缩布局(上)：Flexbox入门与旧版兼容

第29章 CSS3弹性伸缩布局[上]是关于HTML5中CSS3的新布局技术——Flexbox的入门教程，由李炎恢主讲，由北风网和瓢城Web俱乐部提供。Flexbox是一种响应式布局模型，旨在提供更高效的方式来适应不同屏幕尺寸的设备，特别适用于移动优先的设计。然而，由于仍在W3C草案阶段，存在多种编码方式，包括旧版本、新版本和过渡版本，这可能带来兼容性和稳定性问题。 章节开始时，作者强调了对Flexbox布局的初步了解，因为其发展还在不断变化，浏览器兼容性尚未完全成熟。课程以一个实际例子展开，通过创建包含三个段落的HTML结构，并使用CSS设置样式来展示布局。HTML部分中的`<div>`被设置为`display: -moz-box; display: -webkit-box; display: box;`，除了IE浏览器，其他现代浏览器如Firefox、Chrome、Opera和Safari均能支持这种布局模式。 在旧版本的Flexbox中，关键的属性`display`有`box`和`inline-box`两种值。`box`表示块级弹性伸缩盒，适用于需要占据整行的容器，如`<div>`；而`inline-box`则是内联级弹性伸缩盒，适用于不占满行的元素，如`<span>`。尽管这些属性可以实现一定程度的弹性布局，但由于其历史地位和浏览器兼容性限制，课程建议读者仅作为入门理解，未来可能需要关注新版本的更新和更广泛的浏览器支持。 随着课程深入，会进一步讲解新版本Flexbox（现在通常称为Flex）的语法和特性，包括`flex-direction`、`flex-wrap`、`flex-grow`、`flex-shrink`等关键属性，以及如何利用它们创建动态、灵活的布局。同时，课程还会讨论如何处理浏览器兼容性问题，可能涉及使用浏览器前缀或者使用CSS3的polyfill来扩展旧版本的功能。 第29章CSS3弹性伸缩布局[上]是一门实用的课程，适合希望通过CSS3实现响应式设计和适应性布局的开发者，不仅介绍了基础知识，也预示了未来发展方向，但需注意实践中可能遇到的兼容性挑战。