Flex与传统布局对比

弹性盒布局是css3中新增加的一种页面布局方式，是一种很灵活的页面布局方式。当页面需要适应不同大小的屏幕和各类设备时，可以确保各元素的布局能随之自动调节，而不至于出现页面变形。引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的子元素进行排列、对齐和分配空白空间。
弹性盒由容器、子元素、和轴组成，并且默认情况下，子元素的排布方向与横轴的方向一致。弹性盒改进了块模块，弹性盒布局中的子元素通常都在一行内显示，并且默认情况下每个容器都只有一行。既不使用浮动，也不会在弹性盒容器与其内容之间合并外边距。
弹性盒布局与传统布局相比的优势：
传统的布局基于盒子模型，依赖display,position,float等属性。对于一些特殊的布局实现起来很不方便，比如垂直居中等。不管浏览器的窗口怎么变化都是按html语义标签的排列进行布局。
Flex可以用比较简单的方式实现一些特殊的布局，可以轻松地创建响应式网页布局，为盒状模型增加灵活性，是一种非常灵活的布局方法。弹性盒布局与方向无关，并且随着浏览器尺寸的变化，容器内的元素可以随之自动调整。