html左右超出,css 横向超出滚动 使用flex布局

描述

横向超出滚动 一般使用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

动动手指点赞

如果这篇文章对你有用,请给我点个赞,让我更加有动力写下去,谢谢