学习日记--flex保持子div不变

目标：在perent-div中 child-div中的其中一个不改变宽度

这里要借助flex的item属性，也许很多人会觉得很难，其实很简单，我说说我是怎么记得。

首先知道有六个属性
然后知道 flex-grow 和 flex-basis 是在有剩余空间使用
flex-shrink 是没有剩余空间使用
这样就记住一半了，
然后余下的基本看一眼就知道了，无非就是flex、order、flex-self,就这样记完了。

回到题目，重点使用 flex-shrink

这里一定要记住

item-div 中（ flex-grow 和 flex-basis 是在有剩余空间使用）（ flex-shrink 是没有剩余空间使用）

flex-basis 是在有剩余空间的时候才能自定义宽度，否则不起作用。

因此：

 <style>
        .perant{
            backgrond:blue;
            width:500px;
            height: 300px;
            display:flex;
            margin:0 auto;
        }
        .child1{
            background: red;
            width: 300px;
            height: 100%;
            flex-shrink: 0;  // 设置以后宽就是300px了
        }
        .child2{
            background: pink;
            width: 200px;
            height: 100%;
            
        }
        .child3{
            background: green;
            width: 100px;
            height: 100%;
        }
    </style>
 
<body>
    <div class="perant">
        <div class="child1">1</div>
        <div class="child2">2</div>
        <div class="child3">3</div>
    </div>
</body>

上一篇vue "keyId=xxxxx&keyId=xxxxx&keyId=xxxxx" 传值办法

下一篇mysql 数据库迁移办法

本文作者：轻风细雨_林木木

本文链接：https://www.cnblogs.com/linzhifen5/p/16961351.html

posted @ 2022-12-06 22:21 轻风细雨_林木木阅读(163) 评论(0) 编辑收藏举报

刷新页面返回顶部

登录后才能查看或发表评论，立即登录或者逛逛博客园首页

相关博文：

· 学习日记--flex:1 表示什么

· 解决页面高度和宽度问题

· 深入理解flex布局的flex-grow、flex-shrink、flex-basis

· Flex布局常用属性详解

· flex-grow、flex-shrink 以及flex-basis 属性

阅读排行：
· TypeScript + Deepseek 打造卜卦网站：技术与玄学的结合
· Manus的开源复刻OpenManus初探
· AI 智能体引爆开源社区「GitHub 热点速览」
· 三行代码完成国际化适配，妙~啊~
· .NET Core 中如何实现缓存的预热？

轻风细雨_林木木

做最优秀的自己。

学习日记--flex保持子div不变

公告

常用链接

最新随笔

我的标签

随笔分类

随笔档案

阅读排行榜

评论排行榜

推荐排行榜

最新评论

	<style>
	.perant{
	backgrond:blue;
	width:500px;
	height: 300px;
	display:flex;
	margin:0 auto;
	}
	.child1{
	background: red;
	width: 300px;
	height: 100%;
	flex-shrink: 0; // 设置以后宽就是300px了
	}
	.child2{
	background: pink;
	width: 200px;
	height: 100%;

	}
	.child3{
	background: green;
	width: 100px;
	height: 100%;
	}
	</style>

	<body>
	<div class="perant">
	<div class="child1">1</div>
	<div class="child2">2</div>
	<div class="child3">3</div>
	</div>
	</body>