flex 左边固定 右边自适应
时间: 2024-09-10 10:21:05 浏览: 16
Flex布局是一种现代的CSS布局模式,它可以让容器内的项目自动调整空间以适应可用的空间。如果你想要创建一个左边固定宽度,右边自适应宽度的布局,可以结合`display: flex`和一些特定的属性来实现。以下是一个基本的HTML和CSS示例:
```html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<style>
.container {
display: flex;
justify-content: space-between; /* 左侧固定,右侧自适应 */
}
.fixed-side {
width: 200px; /* 固定左侧宽度 */
background-color: #f00; /* 红色背景示例 */
}
.adaptive-side {
flex: 1; /* 自动填充剩余空间 */
background-color: #0f0; /* 绿色背景示例 */
}
</style>
</head>
<body>
<div class="container">
<div class="fixed-side">左侧固定部分</div>
<div class="adaptive-side">右侧自适应部分</div>
</div>
</body>
</html>
```
在这个例子中,`.container`设置为`display: flex`,`justify-content: space-between`使得左侧的部分占据固定宽度,而右侧的部分则占据了剩余的所有空间(`flex: 1`表示弹性伸缩,会占满剩下的所有自由空间)。