摘要
前不久碰到一个需求，在宽度不固定下实现横线滚动，这里我用css来写，记录下来，供以后借鉴。
有时会忘记
原理
子元素的宽度大于父元素是，会出现滚动 overflow-x: scroll; 为水平滚动，overflow-y: scroll; 为垂直滚动，按需求这里采用水平横向滚动
// html 如下
<div class="content">
<div class="redPacket">
<div class="item" style="margin-right:10px;border-radius:4px;">
<div class="amount">
<span>2</span>元
</div>
<div class="fundInfo">
<p class="name">鹏华基金鹏友会</p>
<p>满1000元可用</p>
</div>
</div>
<div class="item" style="margin-right:10px;border-radius:4px;">
<div class="amount">
<span>2</span>元
</div>
<div class="fundInfo">
<p class="name">鹏华基金鹏友会</p>
<p>满1000元可用</p>
</div>
</div>
</div>
</div>
// css如下
* {
margin:0;
padding:0;
}
body {
width:320px;
height: 40px;
overflow: hidden;
margin:100px auto;
}
.content {
width: 100%;
overflow-x: scroll; // 子元素的宽度大于父元素的即可滚动
overflow-y: hidden;
border-radius: 4px;
}
/* .content::-webkit-scrollbar {display:none} // 隐藏滚动条*/
.redPacket{
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
float: left; // 使其脱离文档流 宽度为所有字元素的和
min-width: 100%;
}
.item {
min-width: 150px;
height: 50px;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
flex: 3;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
background-image: linear-gradient(90deg,#ff6d0b 2%,#ef4916);
padding: 0 10px;
}
.amount {
text-align: center;
padding-right: 10px;
font-size: 12px;
color: #FFD41D;
border-right: 1px solid #FFA068;
}
.amount span {
font-size: 30px;
line-height: 30px;
}
.fundInfo {
padding: 8px 10px;
}
.fundInfo p {
color: #FFF;
font-size: 12px;
}
demo1.gif
总结：redPacket 在没有添加float: left; 样式的时候。小屏手机（iPhone5） 出现样式错乱现象，这是由于 redPacket宽度和父级宽度一致（100%），并且默认item的最小宽度为最终宽度，子集撑不开，样式乱码，添加float: left; 后 ，使其脱离文档流，宽度变为所有子集（item）之和，这样里面文字无论变为多少，文字都不会被隐藏 。
对应源代码和实例效果 ，放到了codepen 上，如果想实践可以去查阅。
以上为此文章所有内容
