flex布局详细总结（父元素篇）

flex布局也就是弹性盒模型，最初我们使用css来对网页进行布局时，主要用到float和position两个属性，要经常考虑父元素坍塌，脱离文档流，BFC等问题。
当我接触到flex布局后，基本上就不用浮动来布局了，flex布局很简单且能很好的达到想要的效果。当然如果考虑到兼容问题，或者一些项目需要细致的布局要求还是浮动比较好解决问题。

一、 兼容性

首先我们来看一下，flex的兼容性。

这张图中我们可以看到，只要在ie10以上就能使用flex布局。
也推荐大家一个网站，可以查看各种属性的兼容性——caniuse.com

二、 flex基础属性

下面就来总结一下flex布局的基础属性。

在使用flex布局，我们必须先在父元素中开启弹性盒模型（当然是在父元素的css代码中）

  display: flex;

• flex-direction
  在flex布局中一共有两条轴，一条是主轴，一条交叉轴（垂直轴ÿ