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）