display flex布局

让元素同一直线上居中排列，基本用法

display: flex;
-webkit-box-pack:center;
-webkit-box-align:center;
align-items: center;
justify-content: center;

固定为一行

display: -webkit-box;
text-overflow: ellipsis;
-webkit-line-clamp: 1;
overflow: hidden;
-webkit-box-orient: vertical;

完整示例css代码

.music_outer{
    padding: 0 10px;
    background: white;
}
.have_music{
    width: 100%;
    align-items: left;
    line-height: 32px;
    color: #666666;
    font-size: 12px;
    -webkit-box-pack: left;  
    -webkit-box-align: left;  
    background: #F4F5F6;
    height: 40px;
    line-height: 40px;
    -webkit-box-pack: left;  
    -webkit-box-align: center;
    border-radius: 4px;
    margin-top: 11px;
    display: flex;
}
.have_music .song_time{
    flex: 1;
    color: #999;
    margin-left: 37px;
}
.left_div{
    flex: 1;
    display: -webkit-box;
    text-overflow: ellipsis;
    -webkit-line-clamp: 1;
    overflow: hidden;
    margin-left: 11px;
    -webkit-box-orient: vertical;
}
.right_div{
    display: block;
    color: white;
    display: -webkit-box;
    -webkit-box-pack: center;  
    -webkit-box-align: center;
    /*-webkit-box-orient: vertical; */
}
.song{
    color: #666666;
    margin-left: 10px;
    display: -webkit-box;
    text-overflow: ellipsis;
    -webkit-line-clamp: 1;
    overflow: hidden;
    -webkit-box-orient: vertical;
    height: 40px;
    line-height: 40px;
}
.change_music,.volume{
    flex: 1;
    display: block;
    color: white;
    border-radius: 10px;
    display: -webkit-box;
    -webkit-box-pack: center;
    -webkit-box-align: center;
    width: 44px;
    font-size: 12px;
    background: #F5F5F5;
    height: 20px;
    line-height: 20px;
    background: -webkit-linear-gradient(left, #42D8F8 , #1CC2FF);
    background: linear-gradient(to right, #42D8F8, #1CC2FF);
    margin-left: 10px;
}
.change_music{
    width: 64px;
    margin-left: 15px;
}
.volume{
    margin-right: 10px;
}
.volume img{
    display: block;
    width: 12px;
    height: 12px;
}

前端html布局

<div class="music_outer">
    <div class="have_music">
        <div class="left_div">
            儿童歌曲•数鸭.mp3
        </div>
        <div class="right_div">
            <span class="song_time">03:13</span>
            <span class="change_music">跟换配乐</span>
            <span class="volume"><img src="../image/volume.png">26</span>
        </div>
    </div>
</div>