用flex实现PC端三列布局
一、完成作业效果图
二、flex源码
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>爱给网-三列布局</title><style>* {margin: 0;padding: 0;box-sizing: border-box;}a {text-decoration: none;color: lightslategray;}a:hover:not(:first-of-type) {color: black;}body {display: flex;flex-flow: column nowrap;}header,footer {margin-top: 10px;height: 50px;/* border: 1px solid #000; */}header {display: flex;align-items: center;background-color: lightgray;}header > a {flex: 0 1 50px;text-align: center;}header > a:first-of-type {margin-right: 30px;}header > a:last-of-type {margin-left: 550px;}.container {display: flex;/* min-height: 450px; */}.container > aside,main {flex: 0 0 364px;background-color: linen;/* border: 1px solid lightgray; */}.container > aside {display: flex;flex-direction: column;}.container > main {display: flex;flex-direction: column;}aside > .lie {display: flex;flex-flow: row wrap;/* width: 360px; */}main > .lie {display: flex;flex-flow: row wrap;/* width: 360px; */}.top {display: flex;flex-direction: row;flex:0 1 50px;margin-bottom: 20px;}}.item {display:flex;flex-direction: row;flex:0 1 50px;width: 180px;border: 1px solid lightgray;}footer > p {text-align: center;}</style></head><body><!-- 页眉 --><header><a href=""><img src="/logo.jpg" alt="" /></a><a href="">音效</a><a href="">配乐</a><a href="">视频</a><a href="">3D</a><a href="">游戏</a><a href="">平面</a><a href="">教程</a><a href="">登录</a></header><!-- 主体 --><div class="container"><!-- 左边栏 --><aside><div><div class="top"><h3>常用</h3><p>共12万篇</p></div></div><div class="lie"><div class="item"><h4>自然环境</h4><p>天气 灾害 环境</p><a href=""><img src="/1.jpg" alt="" /></a></div><div class="item"><h4>自然环境</h4><p>天气 灾害 环境</p><a href=""><img src="/1.jpg" alt="" /></a></div><div class="item"><h4>自然环境</h4><p>天气 灾害 环境</p><a href=""><img src="/1.jpg" alt="" /></a></div><div class="item"><h4>自然环境</h4><p>天气 灾害 环境</p><a href=""><img src="/1.jpg" alt="" /></a></div><div class="item"><h4>自然环境</h4><p>天气 灾害 环境</p><a href=""><img src="/1.jpg" alt="" /></a></div><div class="item"><h4>自然环境</h4><p>天气 灾害 环境</p><a href=""><img src="/1.jpg" alt="" /></a></div></div></aside><!-- 主体内容区 --><main><div><div class="top"><h3>常用</h3><p>共12万篇</p></div></div><div class="lie"><div class="item"><h4>自然环境</h4><p>天气 灾害 环境</p><a href=""><img src="/1.jpg" alt="" /></a></div><div class="item"><h4>自然环境</h4><p>天气 灾害 环境</p><a href=""><img src="/1.jpg" alt="" /></a></div><div class="item"><h4>自然环境</h4><p>天气 灾害 环境</p><a href=""><img src="/1.jpg" alt="" /></a></div><div class="item"><h4>自然环境</h4><p>天气 灾害 环境</p><a href=""><img src="/1.jpg" alt="" /></a></div><div class="item"><h4>自然环境</h4><p>天气 灾害 环境</p><a href=""><img src="/1.jpg" alt="" /></a></div><div class="item"><h4>自然环境</h4><p>天气 灾害 环境</p><a href=""><img src="/1.jpg" alt="" /></a></div></div></main><!-- 右边栏 --><aside><div><div class="top"><h3>常用</h3><p>共12万篇</p></div></div><div class="lie"><div class="item"><h4>自然环境</h4><p>天气 灾害 环境</p><a href=""><img src="/1.jpg" alt="" /></a></div><div class="item"><h4>自然环境</h4><p>天气 灾害 环境</p><a href=""><img src="/1.jpg" alt="" /></a></div><div class="item"><h4>自然环境</h4><p>天气 灾害 环境</p><a href=""><img src="/1.jpg" alt="" /></a></div><div class="item"><h4>自然环境</h4><p>天气 灾害 环境</p><a href=""><img src="/1.jpg" alt="" /></a></div><div class="item"><h4>自然环境</h4><p>天气 灾害 环境</p><a href=""><img src="/1.jpg" alt="" /></a></div><div class="item"><h4>自然环境</h4><p>天气 灾害 环境</p><a href=""><img src="/1.jpg" alt="" /></a></div></div></aside></div><!-- 页脚 --><footer><p>版权所有©2013-2018 爱给网络 鄂ICP备17000000号</p></footer></body></html>
三、体会总结
对flex的6个属性设置在容器上面的使用有了一定的了解.
- flex-direction:它决定主轴的方向,也就是项目的排列方向。
- flex-wrap:它表示如果一条轴线排不下，可以换行。
- flex-flow:它是flex-direction和flex-wrap的简写模式。
- justify-content:它表示定义主轴上的对齐方式。
- align-item:它表示项目在交叉轴上如何对齐。
- align-content:它定义多根轴线的对齐方式，如果项目只有一根轴线，这个属性就不起作用。
设置在项目上的6个属性
- order：定义项目的排列顺序，数值越小，越靠前，默认值为0.
- flex-grow:定义项目的放大比例，默认值为0.
- flex-shrink:定义项目的缩小比例，默认值为1.
- flex-basis:定义了在分配剩余空间之前，项目占据的主轴空间，默认值为auto。
- flex：它是flex-grow,flex-shrink,flex-basis的简写模式。默认值为0,1,auto。
- align-self:允许单个项目与其他项目有不一样的对齐方式，可以覆盖align-item的属性，默认值为auto。