弹性布局

好的，没打多久，又跪了

弹性布局  flex属性：

如果一个元素被设置了flex属性，那么她就是一个 弹性容器，她肚子里面的孩子就都是 弹性元素         ===>  错的，弹性容器中，只有 在文档流中的子元素，才是弹性元素

<div style = "display:flex">

<div style = "float:left;"> float< /div>     浮动元素也是在文档流中的，所以它是弹性元素

<div styple = "position : absolute ;"> </div>   绝对定位的元素都是脱离文档流的，所以它就不是弹性元素了

<div></div>     是

<span></span>    是

   <div>
<div></div>   不是，因为是她肚子里孩子的肚子里的孩子
</div>

flex 的属性

flex-direction: 方向

共有四种：   flex-direction : row / row-reverse / column / column-reverse   正好对应下面四个图↓

flex-wrap: 换行

三种  flex-wrap: nowrap | wrap | wrap-reverse

flex - flow : 

其实就是把flex - direction  和 flex - wrap  写在一起

order属性：

默认值是 0 ， 越大越往后排，甚至可以取负值

flex-grow:

弹性布局最重要的属性，翻译成成长？    实际上这个属性是把剩余空间按比例分配给设置了flex-grow属性的元素，默认值是0，也就是不分配

弹性容器里有3个元素，剩下的都是空间

我们把第一个元素的grow设为1，结果就是剩余空间都分配给了第一个元素

再把第二个元素的grow设置为2，结果就是把剩余空间分3份，2份给了元素二，1份给了元素1

这样就一目了然了，width = flex-basis + flex-grow/sum(flex-grow)*remain

flex-shrink

相应的会有另一种情况，那就是容器的地方不够大，需要容器里面每个元素都萎缩一部分来腾空间

那么这个属性就是flex-shrink

和grow很类似，shrink的默认值是1，比如本篇第二张图里面的第一行，其实就是因为flex-shrink的默认值是1，5个元素都缩小一部分来避免把容器给撑坏了。

如果有元素的shrink值是2，那么就是别人出1比例的空间，这个元素就要出2比例的空间

justify - content :

这个属性也是关于居中的非常重要的一个属性，弹性容器中如何处理剩余空间和元素的排列关系

一张图说明一切，图中灰黑色部分代表剩余空间，用处最大的当然是center和space-between。

align-items:

用处最大的就是垂直居中和延展

上面两个属性都是容器的属性，操作的也是容器中的所有元素，那么有没有什么办法将单个元素的这种属性区别设置呢？

当然有了，那就是align-self：

align-self: auto|stretch|center|flex-start|flex-end|baseline|initial|inherit;

align-self 的作用是设置单个 flex-item 在 cross-axis方向上的对齐方式，记住是cross-axis。

align-self 的作用实际上和align-items是一样的，只不过前者是用在容器中的，后者是用在元素上的。

总结：

flex 弹性布局可以说是布局神器，很多把人憋到抓狂的功能，使用弹性布局可以轻易实现。但是，这种高级功能当然有它的弊端性，兼容性不好。对，我就说你呢，250浏览器。

我写的还是不太好，下面这个文章还是不错的。

http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html