# css 如何实现左侧固定300px,右侧自适应的布局
Issue
欢迎在 Issue 中交流与讨论: Issue 18 (opens new window)
Author
使用 flex
布局,左侧 300px
,右侧 flex-grow: 1
。pug
代码及 css
代码示例如下
.container
.left
.main
.container {
display: flex;
}
.left {
flex-basis: 300px;
}
.main {
flex-grow: 1;
}
此处看起来比较圆满了,其实还有一个缺陷: 如果 .main 区域过大挤压 .left 区域怎么办,此时还需要加一个禁止挤压
.left {
flex-basis: 300px;
flex-shrink: 0;
}
# 总结
使用 flex
进行如下布局
.container
.left
.main
.container {
display: flex;
}
.left {
flex-basis: 300px;
flex-shrink: 0;
}
.main {
flex-grow: 1;
}