学习了这么多天的css，我们势必要有一个清晰的目标，就是熟练地掌握网页基本布局，其中flex是一个很好用的布局方式，就拿layui来说，他们的这种布局方式就很实用，广泛地应用在后台网页布局。
Xnip2020-11-28_10-17-59.jpg
其中分为header头部
main内容部分，内容部分又分为左边的侧边栏和右边的内容区，左边和右边的都有滚动条在自己的内容区滚动。
footer底部声明栏（有的会有，有的没有）
大致的样子可以用这样的图片来概括：
Xnip2020-11-28_10-29-13.jpg
做出来的效果图（网页布局）是这样式的：
Xnip2020-11-28_10-30-44.jpg
布局思路是这样的：
1 首先给header和footer一个固定的高度，比如说4rem。
2 然后记得body的高度要设为100%，不然body是没有高度的。
3 body的布局设为flex，然后：
body {
height: 100%;
margin: 0rem;
padding: 0rem;
border: 0rem;
display: flex;
flex-flow: column nowrap;
align-items: flex-start;
text-align: center;
}
！！！这里着重说下，一些元素默认是有margin和padding的，所以一般在body里直接清除这些。
4 设置好了header和footer之后，我们就可以开始设计main部分的内容排列，因为body设置的排列是column，就是纵向排列，所以不能用align-items撑开main，只能在main里面设置flex: 1 1 auto将元素撑大，而且aside和article是有滚动条的：所以在main里面要设置隐藏浮动，不然会将屏幕撑到很大（你的元素有多高，屏幕就会有多高，还会把header和footer清零）。：
main {
width: 100%;
display: flex;
flex-flow: row nowrap;
justify-content: flex-start;
flex: 1 1 auto;
overflow: hidden;
}
aside {
background: orange;
width: 16rem;
overflow: auto;
}
article {
background: teal;
flex: 1 1 auto;
overflow: auto;
}
5 上面也可以看到main也是flex布局，所以aside和article成行排列，要使article撑满宽度，也要设置flex: 1 1 auto。最后再完善每块里面的细节布局。
附上源码:
html代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>弹性盒子设置框架</title>
<link rel="stylesheet" href="lichen.css">
</head>
<body>
<header>
</header>
<main>
<aside>
<p>这里的文本内容是可以滚动的1，滚动条方向是垂直方向。</p>
<p>这里的文本内容是可以滚动的，滚动条方向是垂直方向。</p>
<p>这里的文本内容是可以滚动的，滚动条方向是垂直方向。</p>
<p>这里的文本内容是可以滚动的，滚动条方向是垂直方向。</p>
<p>这里的文本内容是可以滚动的，滚动条方向是垂直方向。</p>
<p>这里的文本内容是可以滚动的，滚动条方向是垂直方向。</p>
<p>这里的文本内容是可以滚动的，滚动条方向是垂直方向。</p>
<p>这里的文本内容是可以滚动的，滚动条方向是垂直方向。</p>
<p>这里的文本内容是可以滚动的，滚动条方向是垂直方向。</p>
<p>这里的文本内容是可以滚动的，滚动条方向是垂直方向。</p>
<p>这里的文本内容是可以滚动的，滚动条方向是垂直方向。</p>
<p>这里的文本内容是可以滚动的，滚动条方向是垂直方向。</p>
<p>这里的文本内容是可以滚动的，滚动条方向是垂直方向。</p>
<p>这里的文本内容是可以滚动的，滚动条方向是垂直方向。</p>
<p>这里的文本内容是可以滚动的，滚动条方向是垂直方向。</p>
<p>这里的文本内容是可以滚动的，滚动条方向是垂直方向。</p>
<p>这里的文本内容是可以滚动的，滚动条方向是垂直方向。</p>
<p>这里的文本内容是可以滚动的2，滚动条方向是垂直方向。</p>
</aside>
<article>
<p>这里的文本内容是可以滚动的1，滚动条方向是垂直方向。</p>
<p>这里的文本内容是可以滚动的，滚动条方向是垂直方向。</p>
<p>这里的文本内容是可以滚动的，滚动条方向是垂直方向。</p>
<p>这里的文本内容是可以滚动的，滚动条方向是垂直方向。</p>
<p>这里的文本内容是可以滚动的，滚动条方向是垂直方向。</p>
<p>这里的文本内容是可以滚动的，滚动条方向是垂直方向。</p>
<p>这里的文本内容是可以滚动的，滚动条方向是垂直方向。</p>
<p>这里的文本内容是可以滚动的，滚动条方向是垂直方向。</p>
<p>这里的文本内容是可以滚动的，滚动条方向是垂直方向。</p>
<p>这里的文本内容是可以滚动的，滚动条方向是垂直方向。</p>
<p>这里的文本内容是可以滚动的，滚动条方向是垂直方向。</p>
<p>这里的文本内容是可以滚动的，滚动条方向是垂直方向。</p>
<p>这里的文本内容是可以滚动的，滚动条方向是垂直方向。</p>
<p>这里的文本内容是可以滚动的，滚动条方向是垂直方向。</p>
<p>这里的文本内容是可以滚动的，滚动条方向是垂直方向。</p>
<p>这里的文本内容是可以滚动的，滚动条方向是垂直方向。</p>
<p>这里的文本内容是可以滚动的，滚动条方向是垂直方向。</p>
<p>这里的文本内容是可以滚动的，滚动条方向是垂直方向。</p>
<p>这里的文本内容是可以滚动的，滚动条方向是垂直方向。</p>
<p>这里的文本内容是可以滚动的，滚动条方向是垂直方向。</p>
<p>这里的文本内容是可以滚动的，滚动条方向是垂直方向。</p>
<p>这里的文本内容是可以滚动的，滚动条方向是垂直方向。</p>
<p>这里的文本内容是可以滚动的，滚动条方向是垂直方向。</p>
<p>这里的文本内容是可以滚动的，滚动条方向是垂直方向。</p>
<p>这里的文本内容是可以滚动的，滚动条方向是垂直方向。</p>
<p>这里的文本内容是可以滚动的，滚动条方向是垂直方向。</p>
<p>这里的文本内容是可以滚动的2，滚动条方向是垂直方向。</p>
</article>
</main>
<footer>
</footer>
</body>
</html>
css代码
html {
height: 100%;
}
body {
height: 100%;
margin: 0rem;
padding: 0rem;
border: 0rem;
display: flex;
flex-flow: column nowrap;
align-items: flex-start;
text-align: center;
}
header {
width: 100%;
height: 6rem;
background: blue;
}
main {
width: 100%;
display: flex;
flex-flow: row nowrap;
justify-content: flex-start;
flex: 1 1 auto;
overflow: hidden;
}
aside {
background: orange;
width: 16rem;
overflow: auto;
}
article {
background: teal;
flex: 1 1 auto;
overflow: auto;
}
footer {
width: 100%;
height: 6rem;
background: red;
}
最后就是希望不要看看就行了，自己还是要多练练这种布局方式，在网页布局中很常见而且很方便。横向排列和纵向排列的属性设置在我的上一篇博客中有提及，不懂的小伙伴可以去看看，自己好好在下边练练。如果还是不懂可以私信我
共勉！
网友评论