434day（flex伸缩功能）

最新推荐文章于 2025-05-19 14:24:23 发布

原创最新推荐文章于 2025-05-19 14:24:23 发布 · 124 阅读

0 ·

CC 4.0 BY-SA版权

本文通过一个实例详细解析了Flex布局的伸缩功能，展示了如何使用Flex属性实现不同元素间的响应式布局，包括设置section的宽度、高度及div元素的背景颜色和伸缩比例。

《2018年12月12日》【连续434天】

标题：flex伸缩功能；

内容：

昨天优快云好像炸了。。。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>伸缩布局</title>
	<style>
		* {
			margin: 0;
			padding: 0;
		}
		section {
			width: 80%;
			height: 150px;
			margin: 100px auto;
			display: flex;
			min-width: 500px; /*section最小宽度*/
			/*flex-direction: column; 垂直分布*/
		}
		section div {
			height: 100%;
			flex: 1;
		}
		section div:nth-child(1) {
			background-color: red;
		}
		section div:nth-child(2) {
			background-color: yellow;
			flex: 2;
			margin: 0 10px;
		}
		section div:nth-child(3) {
			background-color: blue;
			flex: 3;
		}

	</style>
</head>
<body>
	<section>
		<div></div>
		<div></div>
		<div></div>
	</section>
</body>
</html>