float（你还在傻傻地用float吗）

我是小渔歌，点击右上方“关注”，每天为你分享【前端技术知识】干货。

大家在做移动端的时候，还有人在用浮动（float）布局吗？

弹性盒模型（flex）可以解决一切，当你用熟悉了之后，你绝对不会再用浮动布局了。

下面就给大家介绍一下，这个弹性盒模型他究竟有何魅力？

演示代码公共dom结构与样式。

<style> .container { display: flex; flex-direction: row; width: 340px; border: 1px solid #000000; height: 80px; } .item { width: 40px; height: 40px; border-radius: 5px; border: 1px solid #000000; } </style> <div class="container"> <div class="item one"> 1 </div> <div class="item two"> 2 </div> <div class="item three"> 3 </div> <div class="item fourt"> 4 </div> </div>

1. flex-direction

指定弹性子元素在容器中的排列方向。

row 横向排列，左对齐。

flex-direction: row

row-reverse：横向排列，右对齐，并且内容是反向顺序。

flex-direction:row-reverse

column 纵向排列，顶部对齐。

flex-direction:column

column-reverse 纵向排列，底部对齐，并且内容是反向顺序。

flex-direction:column-reverse

2. justify-content：横轴上的对齐方式

flex-start：左对齐（默认值）。

justify-content:flex-start

flex-end：右对齐。

justify-content：flex-end

center:水平居中。

justify-content:center

space-between：平均分布。

两头没有间隙。

justify-content:space-between

space-around：平均分布。

两头有间隙。

justify-content:space-around

3. align-items：纵轴上的对齐方式

这个给每个子元素设置不同的高度效果更明显一点。

flex-start：顶部对齐（默认值）。

align-items:flex-start

flex-end：底部对齐。

align-items:flex-end

center：居中。

align-items:center

baseline：基线对齐。

给第二个元素设置一个值，可以看到它是基于文字一条线对齐的。

align-items:baseline

stretch。

与baseline不同的是他是基于子元素顶部一条线对象的。

align-items:stretch

4.flex-wrap：子元素换行方式

nowrap：默认单行。

这时候我们不管把子元素设置多大都不会换行。

flex-wrap:nowrap

wrap：多行。

flex-wrap:wrap

wrap-reverse：翻转多行。

flex-wrap:wrap-reverse

initial。inherit：继承。

5.align-content：用于修改flex-wrap属性，修改各行对齐方式

flex-start。

align-content:flex-start

flex-end。

align-content:flex-end

center。

align-content:center

space-between。

align-content:space-between

space-around。

align-content:space-around

stretch：默认。

上面是父元素的属性，再来看下弹性子元素的属性有哪些？

order 属性值为整数，数字越小，越靠前。

把第四个元素设置成-1。

order:-1

align-self：纵轴。

单独设置某一个子元素的排列方式，这里我们给第四个元素再设置成center,这个大家可以试试其它值,同align-items属性值。

align-self:center

flex：用于指定弹性子元素之间怎么分配空间。

设置元素的占用空间，这里我们给第四个元素设置成2，可以看到它比其它元素占用的空间要大。

flex:2

大家可以动手试下啦[中国赞]

往期精彩内容

能用CSS实现的效果，就尽量把Javascript踢开吧？

在JavaScript中call与apply的实际应用你知道多少？