Flex布局，可以简便、完整、响应式地实现各种页面布局。
如果你身受页面不能自适应的困扰，那可别错过flex这么好用的属性哦。
如果你对浮动定位和绝对定位已经有点厌烦，那你了解一下flex布局吧。
目前，Flex布局，可以简便、完整、响应式地实现各种页面布局。
而且，它已得到了所有浏览器的支持。
这意味着，我能很安全地使用这项功能。
一、 初次了解flex
以前我给页面进行布局时，我是基于盒子模型上，采用的是float浮动和position定位2个主要属性，当时，我不知道flex布局。
那我是怎么开始知道flex的呢？
有一次，我做wap端项目时，随着项目的逐渐完成，我发现页面上出现的问题越来越多了，例如图片乱浮动、居中、内外边距等。自己那段时间真的是忙翻天，一边继续切页面，一边又需要解决页面的各种bug。
后来我意识到了，wap端上的自适应，页面结构自适应用bootstrap框架和媒体查询就足够了，但是页面内容有时还是会出现各种问题， 页面小结构容易乱动，所以为了页面结构更稳定，我同事教我flex属性，我觉得很好用。
我为什么会对flex布局有好感呢？
首先是因为以前的布局方式有点不够用了，需要有新的布局方式。
刚开始切页面我最常用的是float浮动布局，那时，我简直是把float当做救星一般，只要我的页面视觉稍有问题，我就会随意使用float浮动，完全没有考虑到会影响网页的兼容性或者出现乱版。甚至有时当我忘记清除浮动，导致页面结构全乱了。
需要注意的是，当标签使用了float属性后，就脱离了标准输出流，就不受页面约束了。这样不方便，也不利于页面布局。所以，一般浮动之后一定是要及时清除浮动的。
另一个就是position定位布局，这也是我经常会用到的布局方式之一，不过呢，在用之前一定要弄清楚父级与子级，同时也需要清除浮动。
我的总结（友情提示）：如果有其他的布局方式，千万不能乱用或者依赖上float浮动和position布局
二、熟悉flex（我的实践-简单）
(1)简单的实现‘比例性’排列
利用flex属性，可以实现块级元素1：1：1
同理，若将item2里面的flex值改成2，则会出现下面的效果
（2）简单的就能使里面的内容居中（尤其是垂直居中，好用到爆）
上面就是用了jsutify-content与align-item2个属性，对应是实现水平居中和垂直居中。
（3）横向排列、竖向排列等（flex-direction:row/column）
三、flex还有太多魅力，等你来体验
先声明，上面写的几个属性只是我最近布局常用的，不是全部的flex属性，其实flex好用的属性还有很多很多的，你自己去研究吧。
