一：知识点
1：案例中section模块主要分为两列，如何让两列内容分开，在左列往下滑时不会影响右列，右列同样不会影响左列？
设置：overflow: auto;
2：如何设置滚动条格式，让滚动条隐身？
::-webkit-scrollbar{/*** 设置滚条格式 ***/
display: none; /* 滚动条样式清空，不再显示滚动条 */
}
3：align-items: flex-start;保证折行后的行间距
4：section的内容太多会挤压header以及footer的空间，怎样保证不会挤压header和footer的空间？
overflow: auto;
5：以下内容熟记
6：
二：案例代码
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>/* 以下必写，熟练且牢记 */*{padding: 0px;margin: 0px;}html,body{height: 100%;}ul{list-style: none; /* ul前默认的黑色小圆点样式清除 */}body{display: flex;flex-direction: column; /* 主轴方向设置为 列 */}/**********************************/header{height: 45px;line-height: 45px;background-color: gray;}header ul{display: flex;overflow: auto;color: #f8f8f8;}header ul li{flex-shrink: 0;/* 此数值默认设置为1，允许挤压；设置为0，为不允许挤压 */height: 100%;padding: 0 10px;}header ul li:hover{color: red;background: white;}/**********************************/section{flex: 1;display: flex;overflow: auto;/* 不设置，section内容溢出后会挤压header和footer的空间 */}section ul{width: 85px;overflow: auto;/* 设置ul将不影响右边div的空间 */}section ul li{height: 45px;line-height: 45px; text-align: center;font-size: 14px;background: #f8f8f8;}section ul li:hover{background: white;color: red;}section>div{flex: 1;display: flex;flex-wrap: wrap;/* 折行 */align-items: flex-start;/* 这行后保证一样的行间距 */overflow: auto;/* 设置后，将不会影响左边的空间 */}section .content>div{height: 101px;width: 33.33%;text-align: center;}section .content>div img{width: 60px;height: 50px;margin-top: 11px;}::-webkit-scrollbar{/*** 设置滚条格式 ***/display: none; /* 滚动条样式清空，不再显示滚动条 */}/***************footer*******************/footer{height: 50px;background-color: gray;}</style></head><body><header><ul><li>热门推荐</li><li>家用电器</li><li>时令水果</li><li>美妆美发</li><li>手机数码</li><li>电脑办公</li><li>玩具乐器</li><li>京东超市</li><li>手机数码</li><li>京东超市</li><li>手机数码</li><li>京东超市</li><li>手机数码</li></ul></header><section><ul><li>热门推荐</li><li>家用电器</li><li>时令水果</li><li>美妆美发</li><li>手机数码</li><li>电脑办公</li><li>玩具乐器</li><li>京东超市</li><li>手机数码</li><li>京东超市</li><li>手机数码</li><li>京东超市</li><li>手机数码</li><li>京东超市</li><li>手机数码</li><li>京东超市</li><li>手机数码</li></ul><div class="content"><div><img src="/history/photo/京东页面1.png" alt=""><p>电脑</p></div><div><img src="/history/photo/京东页面1.png" alt=""><p>电脑</p></div><div><img src="/history/photo/京东页面1.png" alt=""><p>电脑</p></div><div><img src="/history/photo/京东页面1.png" alt=""><p>电脑</p></div><div><img src="/history/photo/京东页面1.png" alt=""><p>电脑</p></div><div><img src="/history/photo/京东页面1.png" alt=""><p>电脑</p></div><div><img src="/history/photo/京东页面1.png" alt=""><p>电脑</p></div><div><img src="/history/photo/京东页面1.png" alt=""><p>电脑</p></div><div><img src="/history/photo/京东页面1.png" alt=""><p>电脑</p></div><div><img src="/history/photo/京东页面1.png" alt=""><p>电脑</p></div><div><img src="/history/photo/京东页面1.png" alt=""><p>电脑</p></div><div><img src="/history/photo/京东页面1.png" alt=""><p>电脑</p></div><div><img src="/history/photo/京东页面1.png" alt=""><p>电脑</p></div><div><img src="/history/photo/京东页面1.png" alt=""><p>电脑</p></div><div><img src="/history/photo/京东页面1.png" alt=""><p>电脑</p></div><div><img src="/history/photo/京东页面1.png" alt=""><p>电脑</p></div><div><img src="/history/photo/京东页面1.png" alt=""><p>电脑</p></div><div><img src="/history/photo/京东页面1.png" alt=""><p>电脑</p></div><div><img src="/history/photo/京东页面1.png" alt=""><p>电脑</p></div><div><img src="/history/photo/京东页面1.png" alt=""><p>电脑</p></div><div><img src="/history/photo/京东页面1.png" alt=""><p>电脑</p></div><div><img src="/history/photo/京东页面1.png" alt=""><p>电脑</p></div><div><img src="/history/photo/京东页面1.png" alt=""><p>电脑</p></div><div><img src="/history/photo/京东页面1.png" alt=""><p>电脑</p></div></div></section><footer></footer></body></html>
三：运行效果
