overflow-x：scroll中使用flex布局

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

st紫月

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

阅读量673

点赞数 1

分类专栏： HTML/CSS 文章标签： 1024程序员节 javascript

本文链接：https://blog.csdn.net/ziyue13/article/details/120942414

版权

flex布局 flex-shrink 自适应宽度子元素调整 display:flex

关键词由CSDN通过智能技术生成

HTML/CSS 专栏收录该内容

15 篇文章 2 订阅

订阅专栏

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>

在这里插入图片描述

st紫月

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
overflow-x：scroll中使用flex布局

flex布局有一个默认的规则就是当父元素宽度不够用时，自己调整自己所占的宽度比，这个flex-shrink设置为1时，表示所有子元素大家同时缩小来适应总宽度。当flex-shrink设置为0时，表示大家都不缩小适应。<!DOCTYPE html><html lang="zh"><head> <meta charset="UTF-8"> <title>test</title> <style type="text/css"
复制链接

扫一扫

专栏目录