console 命令行工具 X clear

console

<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<title>flex实现布局</title>
</head>

<body>
	<main class="container">
		<section class="left"></section>
		<section class="right">
			<div class="rt"></div>
			<div class="rb"></div>
		</section>
	</main>
</body>

</html>

.container {
    width:100vw;
    height:100vh;
    display: flex;
}

.left {
    flex: 1 0 60%;
    border: 1px solid gray;
    border-radius: 1rem;
    margin: 1rem;
}

.right {
    flex: 1 0 20%;

    display: flex;
    flex-direction: column; 
}

.rt {
    flex: 1;
    margin: 1rem;
    border: 1px solid gray;
    border-radius: 1rem;
}

.rb {
    flex: 1;
    margin: 1rem;
    border: 1px solid gray;
    border-radius: 1rem;
}