探讨一下flex取值的问题

最新推荐文章于 2022-12-08 20:23:47 发布

丑小鸭变黑天鹅

最新推荐文章于 2022-12-08 20:23:47 发布

阅读量330

点赞数

分类专栏： css日常总结文章标签： css css3

本文链接：https://blog.csdn.net/qq_41880073/article/details/115301176

版权

本文详细探讨了CSS flex属性的各个部分，包括flex-grow、flex-shrink和flex-basis，通过实例解释了它们如何影响元素在容器中的布局。重点讨论了在不同取值下，元素如何根据空间变化进行放大或缩小，并列举了一些常见的flex简写形式及其全写等效值。

摘要由CSDN通过智能技术生成

首先明确一点是， flex 是 flex-grow、flex-shrink、flex-basis的缩写。

flex-grow定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大

flex-shrink定义了项目的缩小比例，默认为1,即如果空间不足，该项目将缩小

flex-basis给上面两个属性分配多余空间之前,计算项目是否有多余空间,默认值为auto,即项目本身的
大小

故其取值可以考虑以下情况：

1、研究flex-grow

1）flex：1
首先它对应的完整写法为

flex-grow:1;
flex-shrink:1;
flex-basis:0%;

我们看一个例子，来分析一下

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.father {
    
				display: flex;
				width: 600px;
				height: 100px;
				border: 2px solid red;
			}
			.child1 {
    
				width: 100px;
				background-color: #00FFFF;
			}
			.child2 {
    
				width: 200px;
				background-color: yellow;
			}
			.child3 {
    
				width: 100px;
				flex: 1;
				background-color: green;
			}
		</style>
	</head>
	<body>
		<div class