-webkit-box（弹性盒子）

html

<ul class="list">
    <li>111111111111111111111111</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li> 
</ul>

css

* {
    margin: 0;
    padding: 0;
    list-style: none;
}
.list {
    /* 弹性布局 */
    display: -webkit-box;
     /*
        -webkit-box-orient: 排列方式     默认为水平
            horizontal 水平
            vertical 垂直
    */
    -webkit-box-orient: vertical;
    /*
        -webkit-box-pack: 水平对其方式
            center| start| end| justify
    */
    -webkit-box-pack: justify;
        /*
        -webkit-box-align: 垂直对其方式
            center| start| end| baseline
    */
    -webkit-box-align: center;
}
.list li {
    /* 均分剩余宽度 */
    /*-webkit-box-flex: 1;*/
}
.list li:nth-child(1) {
    background-color: #ccc;
}
.list li:nth-child(2) {
    background-color: red;
}
.list li:nth-child(3) {
    background-color: yellow;
}
.list li:nth-child(4) {
    background-color: blue;
}
.list li:nth-child(5) {
    background-color: green;
}