弹性盒布局（上）

弹性盒布局：
结构

    

        
1
        
2
        
3
    

less样式：

* {
    padding: 0px;
    margin: 0px;
    list-style: none;
}

.whb(@w, @h, @back) {
    width: @w;
    height: @h;
    background-color: @back;
}

.flex {
    .whb(500px, 300px, #999);
    margin: 0 auto;

    div {
        text-align: center;
        line-height: 100px;
        font-size: 30px;
        color: #fff;

        &:nth-of-type(1) {
            .whb(100px, 100px, #4f4);
        }

        &:nth-of-type(2) {
            .whb(100px, 100px, #421);
        }

        &:nth-of-type(3) {
            .whb(100px, 100px, #673);
        }
    }
}

image.png

弹性盒布局样式：
display: flex; 水平值排列：

.flex {
    .whb(500px, 300px, #999);
    margin: 0 auto;
    display: flex;
}

image.png

；

主轴为水平方向，起点在右端,需要direction:row-reverse;

.flex {
    .whb(500px, 300px, #999);
    margin: 0 auto;
    display: flex;
    flex-direction:row-reverse;
}

image.png

轴为垂直方向，起点在上沿排列,需要flex-direction:column;

.flex {
    .whb(500px, 300px, #999);
    margin: 0 auto;
    display: flex;
    flex-direction:column;

image.png

主轴为垂直方向，起点在下沿。需要column-reverse：

.flex {
    .whb(500px, 300px, #999);
    margin: 0 auto;
    display: flex;
    flex-direction:column-reverse;

image.png

如果盒子太多的情况下。我们会发现。这些盒子都挤到了一起。盒子本身的宽度根本就不起作用。这是我只需要换行就可以了。

image.png

（默认）：不换行。需要flex-wrap:nowrap;

.flex {
    .whb(500px, 300px, #999);
    margin: 0 auto;
    display: flex;
    flex-wrap:nowrap;

image.png

换行，第一行在上方。需要flex-wrap:wrap;

.flex {
    .whb(500px, 300px, #999);
    margin: 0 auto;
    display: flex;
    flex-wrap:wrap;
}

image.png

换行，第一行在下方.需要flex-wrap:wrap-reverse;

.flex {
    .whb(500px, 300px, #999);
    margin: 0 auto;
    display: flex;
    flex-wrap:wrap-reverse;
}

image.png

预知后事如何，且听下回分解