弹性布局模型
增加栏目
小结：
- 将栏目的父容器的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,边框盒模型
未来的布局系统
模板布局，网格布局
网友评论