描述
横向超出滚动 一般使用display:inline-block布局,元素里面东西比较多,想使用flex布局怎么办?可以使用下面的方法
使用
Document.box {
width: 700px;
height: 80px;
display: flex;
background-color: #f00;
overflow-x: auto;
}
.sub-box {
/* 如果最后一个元素还没有margin-right,就打开flex-shrink: 0;这个注释 */
/* flex-shrink: 0; */
}
.item {
flex-shrink: 0;
background-color: #ff0;
width: 300px;
height: 100%;
margin-right: 20px;
}
111
222
333
在item元素上包上一层空的sub-box是为了解决最后一个元素没有margin-right
如果包上一层空的div,最后一个 元素还没有margin-right,就给类名.sub-box加上
flex-shrink: 0;
效果如图
横向超出滚动使用flex布局.jpg
动动手指点赞
如果这篇文章对你有用,请给我点个赞,让我更加有动力写下去,谢谢