本文详细探讨了CSS flex属性的各个部分，包括flex-grow、flex-shrink和flex-basis，通过实例解释了它们如何影响元素在容器中的布局。重点讨论了在不同取值下，元素如何根据空间变化进行放大或缩小，并列举了一些常见的flex简写形式及其全写等效值。
探讨一下flex取值的问题
首先明确一点是， 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
最低0.47元/天 解锁文章
4884
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
