HTML5弹性布局flex复合属性以及flex属性计算

是光の谢宣骞

已于 2022-04-03 14:15:32 修改

阅读量898

点赞数

分类专栏：前端学习文章标签： html5 flex

于 2020-12-26 22:11:36 首次发布

原文链接：https://blog.csdn.net/gyz_code/article/details/74938699

版权

前端学习专栏收录该内容

9 篇文章 0 订阅

订阅专栏

如果大家有更深刻的理解，可以和我交流，本人的QQ为：1280809174，欢迎探讨

flex为复合属性，由以下三个属性组成：

<’flex-grow ‘>：

用来指定扩展比例，即剩余空间是正值时此flex子项相对于flex容器里其他flex子项能分配到空间比例
在flex属性中该值如果被省略则默认为1

<’ flex-shrink ‘>：

用来指定收缩比例，即剩余空间是负值时此flex子项相对于flex容器里其他flex子项能收缩的空间比例
在flex属性中该值如果被省略则默认为1
在收缩的时候收缩比例会以伸缩基准值加权(可以看后面两个例题)

<’ flex-basis ‘>：

用来指定伸缩基准值，即在根据伸缩比率计算出剩余空间的分布之前，flex子项宽度的起始数值
在「flex」属性中该值如果被省略则默认为0
在flex属性中该值如果被指定为auto，则伸缩基准值的计算值是自身的 width 值
如果自身的宽度没有定义，则宽度取决于内容

快捷属性值：

如果缩写「flex: 1」, 则其计算值为「1 1 0」

占用全部空间

如果缩写「flex: auto」, 则其计算值为「1 1 auto]

会根据主轴自动伸缩以占用所有剩余空间

如果「flex: none」, 则其计算值为「0 0 auto」

在任何情况都不会发生伸缩

如果「flex: 0 auto」or「flex: initial」,则其计算值为「0 1 auto」

在有剩余空间的时候也不会扩展，但在空间不足时会进行收缩（initial 设置该属性的属性值为初始值）

示例：如下情况每个元素的计算宽是多少

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			.flex{display:flex;width:800px;margin:0;padding:0;list-style:none;background-color: black;}
			    .flex :nth-child(1){flex:1 1 300px;background-color: yellow;}
			    .flex :nth-child(2){flex:2 2 200px;background-color: #0000FF;}
			    .flex :nth-child(3){flex:3 3 400px;background-color: #FF0000;}
		</style>
	</head>
	<body>
		<ul class="flex">
		        <li>a</li>
		        <li>b</li>
		        <li>c</li>
		    </ul>
			<!-- 对比ul长度 -->
			<ul class="flex">
			        123
			    </ul>
	</body>
</html>

本例定义了父容器宽（即主轴宽）为800px，由于子元素设置了伸缩基准值flex-basis，相加300+200+400=900，那么子元素将会溢出900-800=100px；

收缩因子 1 : 2 : 3
伸缩基准 300 : 200 : 400=3 : 2 : 4
收缩比例会以伸缩基准值加权：
13 : 22: 3*4=3 : 4：12

于是我们可以计算a,b,c将被移除的溢出量是多少：

a被移除溢出量：(1/19)*100，即约等于16px
b被移除溢出量：(4/19)*100，即约等于21px
c被移除溢出量：(12/19)*100，即约等于63px

最后a,b,c的实际宽度分别为：

a: 300-16 = 284px
b: 200-21 = 179px
c: 400-63 = 337px

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			.flex{display:flex;width:1500px;margin:0;padding:0;list-style:none;background-color: black;}
			    .flex :nth-child(1){flex:1 1 300px;background-color: yellow;}
			    .flex :nth-child(2){flex:2 2 200px;background-color: #0000FF;}
			    .flex :nth-child(3){flex:3 3 400px;background-color: #FF0000;}
		</style>
	</head>
	<body>
		<ul class="flex">
		        <li>a</li>
		        <li>b</li>
		        <li>c</li>
		    </ul>
			<!-- 对比ul长度 -->
			<ul class="flex">
			        123
			    </ul>
	</body>
</html>

本例定义了父容器宽（即主轴宽）为1500px，由于子元素设置了伸缩基准值flex-basis，相加300+200+400=900，那么容器将有1500-900=600px的剩余宽度；
于是我们可以计算a,b,c将被扩展量是多少：

a的扩展量：1/6600，即约等于100px
b的扩展量：2/6600，即约等于200px
c的扩展量：3/6*600，即约等于300px

最后a,b,c的实际宽度分别为：

300+100=400px,
200+200=400px,
400+300=700px

我这里有一个例子，希望大家能改改数据，自己去揣摩一下~

<!DOCTYPE html>
		<html>
		<head>
		    <meta charset="utf-8" />
		    <title>flex布局</title>
		    <style type="text/css">
		      .wrap3{
		            display: flex;
					flex-wrap: wrap;
		            min-height: 200px;
		        }
		        .wrap3 .left{ 
					flex: 1;
		            flex-basis: 300px;
		            background: red;
		        }
		        .wrap3 .right{   
					flex: 1;
		            flex-basis: 300px;
		            background: blue;
		        }
		        .wrap3 .center{
					/* 还要指定flex */
		            flex:1;
					flex-basis: 400px;
		            background: pink;
		        }
		
		    </style>
		</head>
		<body>
		
		    <div class="wrap3 wrap">
		        <div class="left"></div>
		        <div class="center">
		            flex布局
		        </div>
		        <div class="right"></div>
		    </div>
		
		</body>
		</html>