掌握css3布局

在传统的浮动、定位基础之上，CSS3提供了一系列新的布局方式，包括弹性盒模型、多列、媒体查询等，利用这些布局方式我们可以灵活地应对复杂网页布局，本文通过属性详解、实战案例的方式向您展示这些新兴布局方式的强大之处。

1.弹性盒模型

弹性盒布局模型（Flexible Box Layout）是 CSS3 规范中提出的一种新的布局方式。该布局模型的目的是提供一种更加高效的方式来对容器中的条目进行布局、对齐和分配空间。这种布局方式在条目尺寸未知或动态时也能工作。这种布局方式已经被主流浏览器所支持，可以在 Web 应用开发中使用。

理解这个图

本人文笔有限,这里我推荐别人写得很好的教程。

• Flex 布局教程：语法篇
• Flex 布局教程：实例篇

附带例子:

• flexbox实验场
• flexbox菜单项目实战

2.多列属性

CSS3中新出现的多列布局(multi-column)是传统HTML网页中块状布局模式的有力扩充。这种新语法能够让WEB开发人员轻松的让文本呈现多列显示。我们知道，当一行文字太长时，读者读起来就比较费劲，有可能读错行或读串行；人们的视点从文本的一端移到另一端、然后换到下一行的行首，如果眼球移动浮动过大，他们的注意力就会减退，容易读不下去。所以，为了最大效率的使用大屏幕显示器，页面设计中需要限制文本的宽度，让文本按多列呈现，就像报纸上的新闻排版一样。

但是在CSS3的多列布局(columns)语法功能出现之前，人们如果想让文本呈多列显示，要么使用绝对定位，手动给文本分段落，或者使用JS脚本等，而新语法的出现，彻底改变了这样的局面。