首页 » web前端 » 利用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

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

食用基础

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布局横向滚动制作滑动选项卡以及内容滑块》 发布于2019-08-26

赞(0) 生成海报

评论 1

3 + 8 =
  1. #0

    谢谢楼主教程

    Yinfengrui1年前 (2019-09-09)

长按图片转发给朋友

微信公测版本发布啦
写bug咯!!写bug!!!多端微信小程序星宿适配中....