overflow-x：scroll中使用flex布局

最新推荐文章于 2024-06-27 11:11:39 发布

原创最新推荐文章于 2024-06-27 11:11:39 发布 · 846 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#1024程序员节 #javascript

收录于

HTML/CSS 专栏收录该内容

15 篇文章

订阅专栏

本文探讨了flex布局中flex-shrink设置为1和0时的不同效果，重点在于子元素如何根据父元素宽度调整。通过实例演示，揭示了元素缩放规则在实际项目中的应用。

flex布局有一个默认的规则就是当父元素宽度不够用时，自己调整自己所占的宽度比，这个flex-shrink设置为1时，表示所有子元素大家同时缩小来适应总宽度。当flex-shrink设置为0时，表示大家都不缩小适应。

<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<title>test</title>
	<style type="text/css">
		.div1{
			width: 300px;
			height: 200px;
			background-color: red;
			overflow-x: scroll;
			display: flex;
		}
		.div1 span{
			flex-shrink:0;
			width: 100px;
			background-color: gray;
			margin-left: 20px;
		}
	</style>
</head>
<body>
	<div class="div1">
		<span>1</span>
		<span>1</span>
		<span>1</span>
		<span>1</span>
		<span>1</span>
		<span>1</span>
		<span>1</span>
		<span>1</span>
		<span>1</span>
		<span>1</span>
	</div>
</body>
</html>