使用弹性盒子flex对html进行布局和动态计算视口高度

吉星9527ABC2023-10-07 17:58

使用弹性盒子flex对html进行布局的一个练习

height: calc(100vh - 4px); # vh表示视口高度的百分比，所以100vh表示整个视口的高度。

.mytxt {

text-indent: 2em; /* 首航缩进2字符 */

line-height: 2; /* 2倍行高 */

padding: 8px; /* 内容与边框的距离 */

}

html 复制代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script src="jquery.min.js"></script>
		<style>
			body {
				margin: 0;
				padding: 0;
			}
			/* 在css中设置 row */
			.content{
				width: 100%;
				#height: 700px;
			    height: calc(100vh - 4px);
				
				display : flex; /* 弹性盒子布局 */
				flex-direction: row;   /* flex-direction属性决定主轴的方向 */
				/*  justify-content属性定义了项目在主轴上的对齐方式 */
				justify-content: flex-start;
				align-content:flex-start; /*  align-items属性定义项目在交叉轴(侧轴)上如何对齐  */
				
			}
			.content-item{		
				border:1px solid red;
				margin: 10px;
			}
			.item1{
				width:45%;
			
			}
			.item2{
				width:55%;	
			}
			
			.leftrow1 {
			border:1px solid blue;
				width:100%;
				height:30%;
			}
			.leftrow2 {
				border:1px solid blue;
				width:100%;
				height:30%;
			}
			.leftrow3 {
				border:1px solid blue;
				width:100%;
				height:40%;
			}
			
			
			.rightrow {
				border:1px solid green;
				width:100%;
				height:50%;
			}


			.mytxt {				
				text-indent: 2em; /* 首航缩进2字符 */
				line-height: 2; /* 2倍行高 */
				padding: 8px; /* 内容与边框的距离 */
			}
		</style>
	</head>
	<body>
		<div class="content" id="app">
			<!-- left 45% -->
			<div class="content-item item1">
				<div class="leftrow1"></div>
				<div class="leftrow2"></div>
				<div class="leftrow3  content">
					<div class="content-item item1"></div>		
					<div class="content-item item2"></div>		
				</div>			
			</div>
			<!-- left 55% -->
			<div class="content-item item2">
				<div class="rightrow"></div>
				<div class="rightrow content">
					<div class="content-item item1"></div>		
					<div class="content-item item2"></div>		
				</div>
			
			</div>		
		</div>
		
	</body>
	
</html>

效果如图