flex不香吗，你还在傻傻地用float吗

　　我是小渔歌，点击右上方＂关注＂，每天为你分享【前端技术知识】干货。
　　大家在做移动端的时候，还有人在用浮动（float）布局吗？
　　弹性盒模型（flex）可以解决一切，当你用熟悉了之后，你绝对不会再用浮动布局了。
　　下面就给大家介绍一下，这个弹性盒模型他究竟有何魅力？
　　演示代码公共dom结构与样式。                           1                               2                               3                               4              1. flex-direction
　　指定弹性子元素在容器中的排列方向。row 横向排列，左对齐。
　　flex-direction: rowrow-reverse：横向排列，右对齐，并且内容是反向 顺序。
　　flex-direction:row-reversecolumn 纵向排列，顶部对齐。
　　flex-direction:column
　　column-reverse  纵向排列，底部对齐，并且内容是反向顺序。
　　flex-direction:column-reverse2. justify-content：横轴上的对齐方式flex-start：左对齐（默认值）。
　　justify-content:flex-startflex-end：右对齐。
　　justify-content：flex-endcenter:水平居中。
　　justify-content:centerspace-between：平均分布。
　　两头没有间隙。
　　justify-content:space-betweenspace-around：平均分布。
　　两头有间隙。
　　justify-content:space-around3. align-items：纵轴上的对齐方式
　　这个给每个子元素设置不同的高度效果更明显一点。flex-start：顶部对齐（默认值）。
　　align-items:flex-startflex-end：底部对齐。
　　align-items:flex-endcenter：居中。
　　align-items:centerbaseline：基线对齐。
　　给第二个元素设置一个值，可以看到它是基于文字一条线对齐的。
　　align-items:baselinestretch。
　　与baseline不同的是他是基于子元素顶部一条线对象的。
　　align-items:stretch4.flex-wrap：子元素换行方式nowrap：默认单行。
　　这时候我们不管把子元素设置多大都不会换行。
　　flex-wrap:nowrapwrap：多行。
　　flex-wrap:wrapwrap-reverse：翻转多行。
　　flex-wrap:wrap-reverseinitial。 inherit：继承。 5.align-content：用于修改flex-wrap属性，修改各行对齐方式flex-start。
　　align-content:flex-startflex-end。
　　align-content:flex-endcenter。
　　align-content:centerspace-between。
　　align-content:space-betweenspace-around。
　　align-content:space-aroundstretch：默认。 上面是父元素的属性，再来看下弹性子元素的属性有哪些？order 属性值为整数，数字越小，越靠前。
　　把第四个元素设置成-1。
　　order:-1align-self：纵轴。
　　单独设置某一个子元素的排列方式，这里我们给第四个元素再设置成center,这个大家可以试试其它值,同align-items属性值。
　　align-self:centerflex：用于指定弹性子元素之间怎么分配空间。
　　设置元素的占用空间，这里我们给第四个元素设置成2，可以看到它比其它元素占用的空间要大。
　　flex:2
　　大家可以动手试下啦 [中国赞]往期精彩内容
　　能用CSS实现的效果，就尽量把Javascript踢开吧？
　　在JavaScript中call与apply的实际应用你知道多少？