前言
相较于定位,浮动来说,Flex和Grid才是真正为了浏览器布局而开发的CSS布局系统。两列布局是我们经常使用的一种布局
视频稿件
在阅读本文时,您可以观看视频稿加深您的理解
什么??你不会Flex
莫要着急,如果你对Flex布局不了解,可以看看Steven在哔站的FlexBox讲解
演示
1 – 经典两列布局
效果如图

<style>
* {
margin: 0;
padding: 0;
}
#left-bar {
background-color: red;
height: 100vh;
width: 300px;
}
#content {
background-color: blue;
height: 100vh;
flex-grow: 1;
}
body {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
}
</style>
<div id="left-bar">
</div>
<div id="content">
</div>
1.1 – 代码解析:
首先我们创建了两个Box: left-bar 和 content. 指定 left-bar 为红色, content 为蓝色
然后我们给 left-bar 的高度设定为 100vh (屏幕的100%高度) 并给 left-bar 指定了一个固定的宽度
对父容器body开启flex布局,将派来方式改为 row , 给content指定flex-grow为1, content就会默认填满剩余的所有空间
2- 两行布局

<!-- 两行布局 -->
<style type="text/css">
* {
margin: 0;
padding: 0;
}
#line-top {
background-color: aqua;
width: 100vw;
height: 100px;
}
#line-content {
width: 100vw;
background-color: aquamarine;
flex-grow: 1;
}
#footer {
height: 100px;
background-color: beige;
}
body {
/* 指定100vw和vh很重要,如果content容器的内容比较少,可能撑不开整个屏幕 */
width: 100vw;
height: 100vh;
display: flex;
flex-direction: column;
flex-wrap: nowrap;
}
</style>
<div id="line-top">
</div>
<div id="line-content">
<!-- <div style="height: 1000px;"></div> -->
刚刚说我抄的人是你吗,我不是为了什么排名才转你的文章的哈,就是做个笔记,都是工作中用过并实践的,忘记加你的链接我补上了。
很棒,学习了:^)