flex布局两个盒子水平排列,右边一个靠右边固定宽度,左边一个盒子始终占满剩余部分
时间: 2024-09-29 09:07:48 浏览: 11
在Flex布局中,要实现这样的效果,你可以使用`display: flex;`创建一个flex容器,并结合`flex-grow`, `flex-shrink`, 和 `flex-basis` 属性来管理左右两个子盒的大小和定位。
首先,将容器的`display`设置为`flex`,然后给左侧的盒子设置`flex-grow: 1`,这会让它尽可能地填充满容器剩下的空间;给右侧的盒子设置固定的`flex-basis`,比如`flex-basis: 300px` 或者一个具体的像素值,使其保持固定宽度。
下面是一个简单的HTML和CSS示例:
```html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<style>
.container {
display: flex;
/* 设置主轴方向为水平,交叉轴方向为垂直 */
flex-direction: row;
}
.left-box {
flex-grow: 1; /* 左侧盒子填充剩余空间 */
background-color: lightblue;
padding: 10px;
}
.right-box {
flex-basis: 300px; /* 右侧盒子固定宽度 */
background-color: yellow;
padding: 10px;
}
</style>
</head>
<body>
<div class="container">
<div class="left-box">左侧内容</div>
<div class="right-box">右侧内容 (固定宽度)</div>
</div>
</body>
</html>
```
在这个示例中,当屏幕变宽时,左侧的内容会随着容器扩展,而右侧的内容始终保持300像素的宽度。