当前位置: article > 正文

CSS多列布局等分布局,使用flex_flex一行两个均分

作者：我家自动化 | 2024-03-15 14:47:57

踩

flex一行两个均分


<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>多列布局等分布局</title>
		<!-- 使用flex布局,但是兼容性不是很好 -->
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			html,body{
				height: 100%;
				width: 100%;
			}
			.parent{
				width: 100%;
				height: 100%;
				display: flex;
				background-color: aqua;
				flex: 3;
			}
			.left{
				flex: 1;
				background-color: blue;
			}
			.center{
				flex: 1;
				background-color: red;
			}
			.right{
				flex: 1;
				background-color: yellow;
			}
		</style>
	</head>
	<body>
		<div class="parent">
			<div class="left">
				我在左侧
			</div>
			<div class="center">
				我是居中
			</div>
			<div class="right">
				我在右侧
			</div>
		</div>
	</body>
</html>

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/我家自动化/article/detail/241929