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

　　我是小渔歌，点击右上方关注，每天为你分享【前端技术知识】干货。
　　大家在做移动端的时候，还有人在用浮动（float）布局吗？
　　弹性盒模型（flex）可以解决一切，当你用熟悉了之后，你绝对不会再用浮动布局了。
　　下面就给大家介绍一下，这个弹性盒模型他究竟有何魅力？
　　演示代码公共dom结构与样式。style。container｛display：flex；flexdirection：row；width：340px；border：1pxsolid000000；height：80px；｝。item｛width：40px；height：40px；borderradius：5px；border：1pxsolid000000；｝style12341。flexdirection
　　指定弹性子元素在容器中的排列方向。row横向排列，左对齐。
　　flexdirection：rowrowreverse：横向排列，右对齐，并且内容是反向顺序。
　　flexdirection：rowreversecolumn纵向排列，顶部对齐。
　　flexdirection：column
　　columnreverse纵向排列，底部对齐，并且内容是反向顺序。
　　flexdirection：columnreverse2。justifycontent：横轴上的对齐方式flexstart：左对齐（默认值）。
　　justifycontent：flexstartflexend：右对齐。
　　justifycontent：flexendcenter：水平居中。
　　justifycontent：centerspacebetween：平均分布。
　　两头没有间隙。
　　justifycontent：spacebetweenspacearound：平均分布。
　　两头有间隙。
　　justifycontent：spacearound3。alignitems：纵轴上的对齐方式
　　这个给每个子元素设置不同的高度效果更明显一点。flexstart：顶部对齐（默认值）。
　　alignitems：flexstartflexend：底部对齐。
　　alignitems：flexendcenter：居中。
　　alignitems：centerbaseline：基线对齐。
　　给第二个元素设置一个值，可以看到它是基于文字一条线对齐的。
　　alignitems：baselinestretch。
　　与baseline不同的是他是基于子元素顶部一条线对象的。
　　alignitems：stretch4。flexwrap：子元素换行方式nowrap：默认单行。
　　这时候我们不管把子元素设置多大都不会换行。
　　flexwrap：nowrapwrap：多行。
　　flexwrap：wrapwrapreverse：翻转多行。
　　flexwrap：wrapreverseinitial。inherit：继承。5。aligncontent：用于修改flexwrap属性，修改各行对齐方式flexstart。
　　aligncontent：flexstartflexend。
　　aligncontent：flexendcenter。
　　aligncontent：centerspacebetween。
　　aligncontent：spacebetweenspacearound。
　　aligncontent：spacearoundstretch：默认。上面是父元素的属性，再来看下弹性子元素的属性有哪些？order属性值为整数，数字越小，越靠前。
　　把第四个元素设置成1。
　　order：1alignself：纵轴。
　　单独设置某一个子元素的排列方式，这里我们给第四个元素再设置成center，这个大家可以试试其它值，同alignitems属性值。
　　alignself：centerflex：用于指定弹性子元素之间怎么分配空间。
　　设置元素的占用空间，这里我们给第四个元素设置成2，可以看到它比其它元素占用的空间要大。
　　flex：2
　　大家可以动手试下啦〔中国赞〕往期精彩内容
　　能用CSS实现的效果，就尽量把Javascript踢开吧？
　　在JavaScript中call与apply的实际应用你知道多少？