css felx 实现弹性布局遇到的坑

最新推荐文章于 2022-05-12 18:01:51 发布

sunny_lss

最新推荐文章于 2022-05-12 18:01:51 发布

阅读量294

点赞数

本文链接：https://blog.csdn.net/sunny_lss/article/details/96172745

版权

用float 或flex 都可以实现左右滑动，这里记录下自己实现的时候遇到的坑

<!DOCTYPE html>
<html lang="zh">
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<meta http-equiv="X-UA-Compatible" content="ie=edge">
		<title></title>
		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
				list-style: none;
			}

			div {
				width: 400px;
				margin: 100px auto;

			}
			ul {
				display: flex;
				flex-wrap: nowrap;
				width: 100%;
				justify-content: space-between;
				overflow-x: auto;
			}
			li {
				width: 300px;
				height: 300px;
				margin-right: 40px;
				border:1px solid #333;
			}
		</style>
	</head>
	<body>
		<div>
			<ul>
				<li>
					1111
				</li>
				<li>
					1111
				</li>
				<li>
					1111
				</li>
				<li>
					1111
				</li>
				<li>
					1111
				</li>
				<li>
					1111
				</li>
				<li>
					1111
				</li>
				<li>
					1111
				</li>
			</ul>
		</div>
	</body>
</html>

以为这样就可以了结果效果出来确实可以左右滑动了但设置的li 的宽度不对啊

我设置的300px 后来去看了下flex 的属性设置子元素的flex-shrink ：0 即可指的是子元素的收缩规则 0 为不收缩或者设置子元素flex :none 就相当于 flex-shrink:0 flex-grow:0; flex-basis:auto; 记录一下记性不好的蜗牛啊加油

sunny_lss

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css felx 实现弹性布局遇到的坑

用float或flex都可以实现左右滑动，这里记录下自己实现的时候遇到的坑<!DOCTYPE html><html lang="zh"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-sca...
复制链接

扫一扫