梗概
- [use::弹性布局]
- 固定的列设置宽度，自适应的列设计缩放
示例
假设我们有一个页面布局，其中包含两列内容：一列是固定宽度的侧边栏，另一列是自适应宽度的主要内容区域。
<!DOCTYPE html>
<html>
<head>
<style>
.container {
display: flex;
}
.sidebar {
width: 200px; /* 固定宽度 */
background-color: lightgrey;
}
.main-content {
flex: 1; /* 自适应宽度 */
background-color: lightblue;
padding: 20px;
}
</style>
</head>
<body>
<div class="container">
<div class="sidebar">
<h2>Sidebar</h2>
<p>This is the sidebar content.</p>
</div>
<div class="main-content">
<h1>Main Content</h1>
<p>This is the main content area. It will adjust its width based on the available space.</p>
</div>
</div>
</body>
</html>在这个示例中，我们使用了弹性布局（flexbox）来实现自适应多列布局。侧边栏的宽度是固定的（200px），而主要内容区域会根据可用空间自动调整宽度。这样无论浏览器窗口大小如何变化，布局都会保持整洁且适应性强。