弹性布局兼容例子

最新推荐文章于 2024-04-30 21:16:29 发布

jrongweb

最新推荐文章于 2024-04-30 21:16:29 发布

阅读量1.1k

点赞数 1

文章标签：弹性布局兼容例子

本文链接：https://blog.csdn.net/o11111123456l/article/details/54379061

版权

<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8">
	<title></title>
	<style type="text/css">
		* {
			margin: 0;
			padding: 0;
		}
		
		body,
		html {
			width: 100%;
			height: 100%;
		}
		
		body {
			display: -webkit-box;
			display: -moz-box;
			display: -ms-flexbox;
			display: -webkit-flex;
			display: flex;
			-webkit-box-orient: vertical;
			-webkit-box-direction: normal;
			-moz-box-orient: vertical;
			-moz-box-direction: normal;
			flex-direction: column;
			-webkit-flex-direction: column;
		}
		
		.hade {
			width: 100%;
			height: 70px;
			display: -webkit-box;
			display: -moz-box;
			display: -ms-flexbox;
			display: -webkit-flex;
			display: flex;
			-webkit-box-orient: horizontal;
			-webkit-box-direction: normal;
			-moz-box-orient: horizontal;
			-moz-box-direction: normal;
			flex-direction: row;
			-webkit-flex-direction: row;
		}
		
		.sz {
			width: 200px;
			background: salmon;
		}
		
		.sy {
			box-flex: 1;
			-webkit-box-flex: 1;
			-moz-box-flex: 1;
			flex: 1;
			-webkit-flex: 1;
			background: seagreen;
			min-width:300px;
		}
		
		.content {
			width: 100%;
			display: -webkit-box;
			display: -moz-box;
			display: -ms-flexbox;
			display: -webkit-flex;
			display: flex;
			-webkit-box-orient: horizontal;
			-webkit-box-direction: normal;
			-moz-box-orient: horizontal;
			-moz-box-direction: normal;
			flex-direction: row;
			-webkit-flex-direction: row;
			box-flex: 1;
			-webkit-box-flex: 1;
			-moz-box-flex: 1;
			flex: 1;
			-webkit-flex: 1;
		}
		
		.syc {
			width: 100px;
			height: 100px;
			text-align: center;
			line-height: 100px;
			margin: 50px auto;
			background: gary;
		}
		
		.z1 {
			width: 50%;
			background: red;
			display: -webkit-box;
			display: -moz-box;
			display: -ms-flexbox;
			display: -webkit-flex;
			display: flex;
			-webkit-box-orient: horizontal;
			-webkit-box-direction: normal;
			-moz-box-orient: horizontal;
			-moz-box-direction: normal;
			flex-direction: row;
			-webkit-flex-direction: row;
		}
		
		.z2 {
			box-flex: 4;
			-webkit-box-flex: 4;
			-moz-box-flex: 4;
			flex: 4;
			-webkit-flex: 4;
			background: salmon;
		}
		
		.z3 {
			box-flex: 2;
			-webkit-box-flex: 2;
			-moz-box-flex: 2;
			flex: 2;
			-webkit-flex: 2;
			background: magenta;
		}
		
		.z1a {
			float: left;
			width: 300px;
		}
	</style>
</head>

<body>
	<div class="hade">
		<div class="sz">上左宽高固定</div>
		<div>上中宽高不给</div>
		<div class="sy">
			<div class="syc">测试</div>
		</div>
	</div>
	<div class="content">
		<div class="z1">
			<div class="z1a">haha1</div>
			<div class="z1a">haha2</div>
			<div class="z1a">haha3</div>
		</div>
		<div class="z2">中部宽高自适应</div>
		<div class="z3">中部宽高自适应</div>
	</div>
	<div class="footer">底</div>
</body>

</html>