利用flex布局横向滚动
首先介绍一下什么是flex布局，为啥喜欢用flex布局呢，枫瑞之前在做项目的评论留言的时候采用浮动（float），又要两边对齐，有要左浮动，又要右浮动，最后话要防止塌陷。在认识flex布局之后才发现世界既然如此美好，Flex是Flexible Box的缩写，意为”弹性布局”，用来为盒状模型提供最大的灵活性，任何一个容器都可以指定为Flex布局，行内元素也可以的哦！容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）。主轴的开始位置（与边框的交叉点）叫做main start，结束位置叫做main end；交叉轴的开始位置叫做cross start，结束位置叫做cross end。项目默认沿主轴排列。单个项目占据的主轴空间叫做main size，占据的交叉轴空间叫做cross size
食用基础
1.将一个任何容器定义为felx，样式演示如下
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <style> .feng{ display: flex; } </style> </head> <body> <div id="" class="feng"> </div> </body> </html>2.常用标签
display: flexflex布局justify-content: space-between位于首尾两端的子容器两端对齐flex-shrink: 0收缩比例white-space: nowrap规定段落中的文本不进行换行overflow-x: auto横向溢出元素的内容区域添加滚动
3.重点说明下flex-shrink:0
flex-shrink的默认是1，如果是默认值那么容器会有一个动态计算，例如一个div长度是100px里面放2个子div，给子div设定宽度为50px，2个就是100 。如果你放20个它会计算为5px 而不是50px。设置为0的时候，它会保持为50px
注意：
如果flex布局子div的宽度发现变化了，或者无法滑动是因为没有添加flex-shrink
案例
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <style> .feng{ display: flex;/* 设置布局类型 */ width: 400px;/* 设置宽度 */ border: red 1px solid;/* 设置边框 */ margin: 20% 30%;/* 设置一下外边距 */ padding: 10px;/* 设置内边距 */ flex-wrap: nowrap;/* 不换行 */ overflow-x: auto;/* 超出宽度滑动 */ } .ww{ width: 100px;/* 设置宽度 */ margin: 0px 10px;/* 设置左右距离 */ flex-shrink:0;/* 设置宽度 */ } </style> </head> <body> <div id="" class="feng"> <div class="ww">选项卡一</div> <div class="ww">选项卡二</div> <div class="ww">选项卡三</div> <div class="ww">选项卡四</div> <div class="ww">选项卡五</div> <div class="ww">选项卡六</div> <div class="ww">选项卡七</div> <div class="ww">选项卡八</div> </div> </body> </html>
声明：
1.本站大部分内容均收集于网络!若内容若侵犯到您的权益，请发送邮件至：ceo@zunw.cn，我们将第一时间处理！
2.资源所需价格并非资源售卖价格，是收集、整理、编辑详情以及本站运营的适当补贴，并且本站不提供任何免费技术支持
3.所有资源仅限于参考和学习，版权归原作者所有，更多请阅读网站声明。
