flex实现横向滚动条

Question

横向一排超出body 可以左右滚动 不换行

类似里面元素浮动 大盒子overflow-x:scroll

Answer 1

两种方法

.box li,.box2 li{
    width: 100px;
    height: 30px;
    display: inline-block;
    background: red;
}
.box li:nth-child(2n),
.box2 li:nth-child(2n){
    background: blue;
}
        
.box{
    width: 300px;
    white-space: nowrap;
    overflow-x: auto;
    border:1px solid #999
}
        
.box2{
    width: 300px;
    overflow-x: auto;
    border:1px solid #999
}
.box2{
    display: flex;
}
.box2 li{
    flex-shrink:0
}

<ul class="box">
    <li></li><li></li><li></li><li></li><li></li><li></li>
</ul>

<ul class="box2">
    <li></li><li></li><li></li><li></li><li></li><li></li>
</ul>

Answer 2

display: flex;
overflow-x: auto;
// width: 100%;
默认就是横向排列不换行。width看情况加

Answer 3

容器：
    display: flex;
    overflow-x: auto;
子项：
    flex-shrink: 0; // 即子项目每项都不压缩，默认为1，当空间不足时会被压缩

Answer 4

display: flex;
overflow-x: auto;
flex: none;

可以解决

Answer 5

嵌套一层，可以实现