css3 横向拖拽

css:

.tab{
         list-style-type: none;
         display:-webkit-box;
         display:-webkit-flex;
         display:-ms-flexbox;
         display:flex;
         -webkit-flex-wrap:nowrap;
         -ms-flex-wrap:nowrap;
         flex-wrap:nowrap;
         -webkit-box-pack:justify;
         -webkit-justify-content:space-between;
         -ms-flex-pack:justify;
         justify-content:space-between;
         background:#ccc;
         padding:0;
         overflow:auto;}
    .tab-item{
        -webkit-box-flex:1;
        -webkit-flex:1 0 auto;
        -ms-flex:1 0 auto;
        flex:1 0 auto;
        color:white;
        padding:0 0.5rem;
    }

html:

<ul class="tab margin-top5">
        <li class="tab-item">篮球</li>
        <li class="tab-item">篮球</li>
        <li class="tab-item">篮球</li>
        <li class="tab-item">篮球</li>
        <li class="tab-item">篮球</li>
        <li class="tab-item">篮球</li>
        <li class="tab-item">篮球</li>
        <li class="tab-item">篮球</li>
        <li class="tab-item">篮球</li>
        <li class="tab-item">篮球</li>
        <li class="tab-item">篮球</li>
    </ul>