flex布局中间固定宽度
时间: 2023-11-09 21:59:42 浏览: 463
在 Flex 布局中,要实现中间固定宽度的效果,可以使用 Flexbox 的属性和技巧。下面是一种常见的方法:
首先,给容器设置 `display: flex;`,这样容器内的子元素就会变成 Flex 项目,然后可以使用以下属性和值来实现中间固定宽度的效果:
1. 将左侧的项目设置为 `flex: 1;`,这会使其占据剩余空间的比例为 1,相当于平分剩余空间。
2. 将中间的项目设置为 `flex: 0 0 auto;`,这会使其宽度固定不变。
3. 将右侧的项目设置为 `flex: 1;`,同样会平分剩余空间。
这样就可以实现中间项目宽度固定,左右项目自动平分剩余空间的效果。以下是示例代码:
```html
<div class="container">
<div class="left">Left</div>
<div class="middle">Middle</div>
<div class="right">Right</div>
</div>
```
```css
.container {
display: flex;
}
.left, .right {
flex: 1;
}
.middle {
flex: 0 0 auto;
}
```
阅读全文