前情提要
flex布局仍然是现在主流的布局方式，但是我实在看不下去csdn上的关于flex的教程了
本来想更加细致地讲解flex布局的，可是我比较懒，直接实现一个比较经典的布局吧
效果图
实现代码
HTML5 code：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" type="text/css" href="111.css">
</head>
<body>
<div id="header">
</div>
<div id="left">
</div>
<div id="center">
</div>
<div id="right">
</div>
</body>
</html>css3 code：
body{
display: flex;
flex-wrap: wrap;
flex-direction: row;
align-content: flex-start;
width: 100%;
height: 100vh;
}
#header{
background-color: aqua;
width: 100%;
height: 10%;
}
#left,#right{
background-color: aquamarine;
width: 5%;
height: 90%;
}
#center{
background-color: antiquewhite;
width:90%;
height: 90%;
}思路讲解
首先是把body的display设置成flex，这样可以让内部盒子以顺序的形式排序，然后把flex-wrap设置成nowrap，这样在body宽度不足的情况下自动换到下一行。在这里用来实现顶部导航栏单占一行，之后陆续写出左中右三个盒子，调整宽度，让他们挤在同一行。最后使用align-content:flex-start和flex-direction:row让所有盒子向上向左对齐
用的都是百分比，兼容性应该还可以，如果和我一样出现滚动条，可以把body宽度改成99%
标签：body,flex,background,布局,height,width,三栏 From： https://blog.csdn.net/2301_81919216/article/details/142900563