实现两栏布局 右侧⾃适应 三栏布局中间⾃适应

两栏布局

两栏布局实现效果就是将⻚⾯分割成左右宽度不等的两列，宽度较⼩的列设置为固定宽度，剩余宽度

由另⼀列撑满，

⽐如 Ant Design ⽂档，蓝⾊区域为主要内容布局容器，侧边栏为次要内容布局容器

这⾥称宽度较⼩的列⽗元素为次要布局容器，宽度较⼤的列⽗元素为主要布局容器

image-20251207200831325

flex弹性布局

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<style>
.box{
display: flex;
}
.left {
width: 100px;
}
.right {
flex: 1;
}
</style>
<div class="box">
<div class="left">左边</div>
<div class="right">右边</div>
</div>

三栏布局

三栏布局按照左中右的顺序进⾏排列，通常中间列最宽，左右两列次之

⼤家最常⻅的就是 github

. 使⽤flex实现

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
<style type="text/css">
.wrap {
display: flex;
justify-content: space-between;
}
.left,
.right,
.middle {
height: 100px;
}
.left {
width: 200px;
1
2
3
4
5
6
7
8
9
10
11
12
13
background: coral;
}
.right {
width: 120px;
background: lightblue;
}
.middle {
background: #555;
width: 100%;
margin: 0 20px;
}
</style>
<div class="wrap">
<div class="left">左侧</div>
<div class="middle">中间</div>
<div class="right">右侧</div>
</div>