CSS弹性盒flex属性_flex bolder-CSDN博客

本文链接：https://blog.csdn.net/weixin_46421045/article/details/105071411

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			*{margin: 0;padding: 0;}
			.box{
				width: 600px;
				height: 300px;
				border:2px solid red;
				margin: 100px;
				display:flex;/*设置为弹性盒*/
			}
			.box div{
				width:300px;
				font-size:30px;
				font-weight:bolder;
				/*width: 200px;*/
				/*flex:1;*/
			}
			.box .con1{
				height: 100px;
				background: #f00;
				
				/*flex:1;*/
				/*flex:0.5;*/
				/*flex:2;*/
			}
			.box .con2{
				height: 100px;
				background: orange;
				/*flex:2;*/
			}
			.box .con3{
				height: 100px;
				background: skyblue;
				/*flex:1;*/
				/*flex-grow: 1;*/
				/*flex-shrink:5;*/
				/*flex-basis:50%;
				width:300px;*/
			}
			
		</style>
	</head>
	<body>
		<!--
			flex-grow:;数字不带单位,定义项目剩余的宽度进行扩张(放大)
    		flex-shrink:;数字不带单位,项目总宽度超出容器时的缩小设置
    			0	本身的大小,不缩小也不放大
    			1	平均分配,默认值
    			
    			
    		flex-basis: 0%;项目的长度
    		综合写法:
    		felx:放大 缩小 长度; 一般后两者默认不写
		-->
		<div class="box">
			<div class="con1">1</div>
			<div class="con2">2</div>
			<div class="con3">3</div>
		</div>
	</body>
</html>