三栏布局
# 上下栏固定、中间自适应的布局
- flex方案：flex-grow在放大剩余空间
header
contain-5
- float+margin方案
- position方案
# 左右固定，中间自适应
- flex方案：flex-grow默认为0，即即如果存在剩余空间，也不放大；如果所有项目的flex-grow属性都为1，则它们将等分剩余空间（如果有的话）
left
contain
right
- float方案+margin方案
// 注意标签的顺序
<div class="box-2">
<div class="left-2">left</div>
<div class="right-2">right</div>
<div class="contain-2">contain</div>
</div>
1
2
3
4
5
6
2
3
4
5
6
left
right
contain
- float方案+BFC方案
原理：BFC的区域不会与float box重叠
left
right
contain
- position方案
left
contain
right
编辑 (opens new window)
上次更新: 2025/07/17, 07:17:44
