使用flex写个横向滚动

结构

	<div class="wrapper">
		<div class="item"></div>
		<div class="item"></div>
		<div class="item"></div>
	</div>

样式

	<style type="text/css">
		.wrapper {
			display: flex;
			overflow: auto;
			border: 1px solid #f00;
			padding: 10px;
			width: 250px;
		}

		.item {
			height: 100px;
			width: 100px;
			background-color: #f00;
			margin: 10px;
			flex-shrink: 0;
		}

	</style>

flex-shrink属性设为0，当空间不够时，flex项目不会被压缩

效果