Html5弹性布局（虽然是很简单的东西，但是也有记不住的时候）

一、弹性布局Css公共样式

/* 公共弹性布局样式 */
/* 父容器 */
.flex{
    display:flex;
    flex-wrap: wrap;
    justify-content: space-around;
}

/* 各种速度变化的弹性子节点类名 */
/* 子节点 */
.flex-cell-1{
    flex-grow: 1;
    flex-shrink:1;
    text-align: center;
}

.flex-cell-2{
    flex-grow: 2;
    flex-shrink:1;
    text-align: center;
}

.flex-cell-3{
    flex-grow: 3;
    flex-shrink:1;
    text-align: center;
}

.flex-cell-4{
    flex-grow: 4;
    flex-shrink:1;
    text-align: center;
}

.flex-cell-5{
    flex-grow: 5;
    flex-shrink:1;
    text-align: center;
}

.flex-cell-6{
    flex-grow: 6;
    flex-shrink:1;
    text-align: center;
}

.flex-cell-7{
    flex-grow: 7;
    flex-shrink:1;
    text-align: center;
}

.flex-cell-8{
    flex-grow: 8;
    flex-shrink:1;
    text-align: center;
}

.flex-cell-9{
    flex-grow: 9;
    flex-shrink:1;
    text-align: center;
}

.flex-cell-10{
    flex-grow: 10;
    flex-shrink:1;
    text-align: center;
}

.flex-cell-11{
    flex-grow: 11;
    flex-shrink:1;
    text-align: center;
}

.flex-cell-12{
    flex-grow: 12;
    flex-shrink:1;
    text-align: center;
}

.flex-cell-13{
    flex-grow: 13;
    flex-shrink:1;
    text-align: center;
}

.flex-cell-14{
    flex-grow: 14;
    flex-shrink:1;
    text-align: center;
}

.flex-cell-15{
    flex-grow: 15;
    flex-shrink:1;
    text-align: center;
}

.flex-cell-16{
    flex-grow: 16;
    flex-shrink:1;
    text-align: center;
}

.flex-cell-17{
    flex-grow: 17;
    flex-shrink:1;
    text-align: center;
}

.flex-cell-18{
    flex-grow: 18;
    flex-shrink:1;
    text-align: center;
}

.flex-cell-19{
    flex-grow: 19;
    flex-shrink:1;
    text-align: center;
}

.flex-cell-20{
    flex-grow: 20;
    flex-shrink:1;
    text-align: center;
}

.flex-cell-21{
    flex-grow: 21;
    flex-shrink:1;
    text-align: center;
}

.flex-cell-22{
    flex-grow: 22;
    flex-shrink:1;
    text-align: center;
}

.flex-cell-23{
    flex-grow: 23;
    flex-shrink:1;
    text-align: center;
}

.flex-cell-24{
    flex-grow: 24;
    flex-shrink:1;
    text-align: center;
}

.flex-cell-25{
    flex-grow: 25;
    flex-shrink:1;
    text-align: center;
}