flex布局,横向滑动

代码如下:

关键属性: flex-shrink: 0; 使用flex布局可以轻松的让元素水平排列, 但是flex默认是在父元素内压缩子元素以达到能够显示所有元素的目的.此时如果想要做水平滚动,就得设置子元素不被压缩.于是flex-shrink设置为0即可.

www.runoob.com/cssref/css3…

<!-- html -->
<div class="list">
	<div class="item">嘿嘿嘿</div>
	<div class="item">嘿嘿嘿嘿嘿嘿</div>
	<div class="item">哈哈哈</div>
	<div class="item">哈哈哈哈哈哈</div>
	<div class="item">和发大水发生</div>
	<div class="item">发的</div>
	<div class="item">阿萨斯所所</div>
	<div class="item">啊啊啊啊啊</div>
</div>

<!-- css -->
.list {
	width: 400px;
	height: 50px;
	border: 1px solid #000000;
	display: flex;
	justify-content: flex-start;
	align-items: center;
	flex-wrap: nowrap;
	overflow-x: auto;
	overflow-y: hidden;
}
.list .item {
	width: auto;
	height: 100%;
	background: #f1f1f1;
	margin-right: 10px;
	flex-shrink: 0;
}
.list .item:last-child {
	margin-right: 0px;
}