第7章 布局秀

弹性布局模型

增加栏目

小结：

• 将栏目的父容器的display属性设为box；
• 将父容器的box-orient属性设置为horizontal；
• 将边栏设定一个固定宽度；
• 使用box-flex特性来让主要内容栏填充剩余的父容器空间。
  • 如果子元素的总宽度比父容器小，它们就会按box-flex指定比例瓜分剩余的宽度；
• 同样如果子元素的总宽度比父容器大，它们就按比例减小相应宽度。

充定栏目顺序

• box-direction: reverse;可能会导致内容也出现反转的问题等。
• 通过设置box-ordinal-group的值控制元素排列顺序。

水平和垂直居中

• box-align只对水平排列的元素在垂直方向的对齐有效，或反过来。
• Safari和Chrome会让设置了float属性的弹性布局元素从页面上消失；Firefox会让设置了overflow属性的元素消失。

现实可用部分

• 弹性表单布局
  利用box-flex实现表单元素排在一行，且文本框可随浏览器大小伸缩
• 底部区域黏附
  让底部区域之前的div弹性自适应，实现底部区域始终显示在可视区域底部而不是内容区域底部
• box-sizing,边框盒模型

未来的布局系统

模板布局，网格布局