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

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

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

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

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

    
        
            1
        
        
            2
        
        
            3
        
        
            4
        
    

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的实际应用你知道多少？