利用flex布局横向滚动制作滑动选项卡以及内容滑块

利用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: flex flex布局
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>

利用flex布局横向滚动制作滑动选项卡以及内容滑块