移动端弹性布局--flex

目前，Flex布局，可以简便、完整、响应式地实现各种页面布局。而且，它已得到了所有浏览器的支持，这意味着，我们能很安全地使用这项功能。

如果你对弹性网页布局感兴趣，那可别错过flex这么好用的属性哦。

一、 初识flex

以前我给PC端网页进行布局时，我是基于盒子模型上，然后采用float浮动和position定位这2个主要属性，当时，我对flex布局并不了解。后来当我开始接触移动端项目时，我开始了解新的布局方式，这才知道flex弹性布局的存在。

我为什么会对flex布局有好感呢？

首先是因为以前的布局方式有点不够用了，需要有新的布局方式。刚开始切页面我最常用的是float浮动布局，那时，我简直是把float当做救星一般，只要我的页面视觉稍有问题，我就会使用float浮动，完全没有考虑到会影响网页的兼容性或者出现乱版。

需要注意的是，当标签使用了float属性后，就脱离了标准输出流，就不受页面约束了。这样不方便，也不利于页面布局。所以，一般浮动之后一定是要及时清除浮动的。

另一个就是position定位布局，这也是我经常会用到的布局方式之一，不过呢，在用之前一定要弄清楚父级与子级。

友情提示：千万不能乱用或者依赖上float浮动和position定位属性哦~其中的苦楚我能说几天几夜T_T......

二、熟悉flex（我的实践中...）

　　(1)好简单能实现‘比例性’排列（重点是自适应了）

　　　　利用flex属性，可以实现块级元素1：1：1

　　　　

　　　　

　　　　同理，若将item2里面的flex值改成2，则会出现下面的效果

　　　　

　　（2）可以使里面的内容居中（尤其是垂直居中，好用到爆）

　　　 　

　　　　　　

　　　　 上面就是用了jsutify-content与align-item2个属性，对应是实现水平居中和垂直居中。

　　（3）横向排列、竖向排列（flex-direction:row/column）

　　　 　

　　　　

　　　　

三、flex就是有太多魅力，等你来发现

　　首先声明哟，flex的功能有很多很多的，而我上面写的几个属性只是我最近布局常用的，我也是认为好用才把这些写出来的。

　　如果想对flex弹性布局有更好的运用，就自己想办法吧......^.^......