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

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

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

.mytxt {

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

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

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

}


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">
			
			<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>
			
			<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>

效果如图

相关阅读:
有赞前端SP毁约后的日子
echarts地图区域高亮时，所在区域的symbol切换图片，类似跟着区域高亮
1.4_10 Axure RP 9 for mac 高保真原型图 - 案例9 【按钮】单选按钮组
【原创分享】PMU电源PCB设计要点
2023年08月个人工作生活总结
物联网开发笔记（48）- 使用Micropython开发ESP32开发板之控制OLED ssd1306屏幕
git、gitee、github使用教程
浅谈安科瑞可编程电测仪表在老挝某项目的应用
顺序表存储一元多项式，并实现两个多项式相加运算（C++，无序输入）
加载器、反射、xml、DTD、schema、注解、单元测试

原文地址：https://blog.csdn.net/jinsedeme0881/article/details/133641728