爱站程序员基地CSS3流式布局
流式布局：经典的流式布局有以下几类
- 左侧固定,右侧自适应
- 右侧固定左侧自适应
- 两侧固定,中间自适应(圣杯布局)
- 等分布局
例如以下这个，网页放大缩小只改变了右边绿色部分。
源码分析
直接设置一个div，里面放两个小div
<div class=\"all\"><div class=\"left\"></div><div class=\"right\"></div></div>
设置div样式
.all {display: flex;height: 800px;background-color: pink;}.left {width: 200px;height: 300px;background-color: red;}.right {flex: 1;////flex-grow: 1; flex-shrink: 1; flex-basis: 0%;height: 500px;background-color: green;}
以上就是圣杯布局的基本样式了
最后合并代码
<!DOCTYPE html><html lang=\"en\"><head><meta charset=\"UTF-8\"><meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"><meta http-equiv=\"X-UA-Compatible\" content=\"ie=edge\"><title>流式布局</title></head><style>.all {display: flex;height: 800px;background-color: pink;}.left {width: 200px;height: 300px;background-color: red;}.right {flex: 1;height: 500px;background-color: green;}</style><body><div class=\"all\"><div class=\"left\"></div><div class=\"right\"></div></div></body></html>
