弹性盒模型

最新推荐文章于 2022-11-13 22:35:11 发布

q_A_p

最新推荐文章于 2022-11-13 22:35:11 发布

阅读量323

点赞数

分类专栏： html

本文链接：https://blog.csdn.net/q_A_p/article/details/53455404

版权

html 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

目的：在浏览器窗口变化时，盒子相应改变大小。

设置了弹性盒模型后，float，clear和vertical-align在flex中不起作用。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			.box{
				display: flex; //父标签定义flex容器
				height: 100px;
				/*flex-flow: column;*/
				/*flex-flow属性是flex-direction属性和flex-wrap属性的简写形式，
				 * 默认值为row nowrap*/
				/*flex-direction: column;*/	
				/*设置主轴方向*/
				/*flex-wrap: nowrap;*/
				/*换行方式*/
				/*justify-content: space-around;*/
				/*给子元素设宽的时候两边间距相同*/
				/*justify-content: flex-end space-around;*/
				/*flex-end代表内容右对齐，space-around代表每个项目两侧的间隔相等*/
				
			}
			.box1{
				height: 100px;
				flex-grow: 1;
				/*flex-grow：1；定于元素的放大比例*/
				background: olive;
			}
			.box2{
				flex-grow: 2;
				background: orange;
			}
			.box3{
				flex-grow: 3;
				background: orangered;
			}
		</style>
	</head>
	<body>
		<div class="box">
			<div class="box1">1</div>
			<div class="box2">1</div>
			<div class="box3">1</div>
		</div>
	</body>
</html>