效果图：
：
源代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>仿新浪微博 flex布局项目实战</title>
<style type="text/css">
.wrap {
width: 1500px;
margin: 10px auto;
display: flex;
flex-direction: column;
}
.wrap .header {
height: 55px;
width: 100%;
display: flex;
justify-content:space-between;
}
.wrap .content {
width: 80%;
border: 1px solid #ccc;
margin: 20px auto;
display: flex;
}
.wrap .content .left{
width: 180px;
height: 600px;
display: flex;
flex-direction: column;
}
.wrap .content .left .nav {
padding: 16px 6px;
text-align: center;
background: #fff;
border-radius:2px;
margin: 6px 20px;
}
.wrap .content .left .nav:hover {
cursor: pointer;
background: linear-gradient(128deg, #fa2f2f 0%, #ff5b36 90%);
}
.wrap .content .center{
flex-grow: 1;
height: 600px;
display: flex;
flex-direction: column;
}
.wrap .content .center .lunbo {
width: 100%;
}
.wrap .content .center .list {
height: 250px;
}
.wrap .content .center .list .item {
display: flex;
flex-direction: column;
}
.wrap .content .center .list .item .title {
font-size: 14px;
}
.wrap .content .center .list .item .posts {
margin-top: 20px;
height: 160px;
width: 100%;
display: flex;
flex-wrap: nowrap;
}
.wrap .content .center .list .item .posts img {
height: 90%;
width: 200px;
margin-right: 8px;
}
.wrap .content .center .list .item .footer {
display: flex;
justify-content: space-between;
}
.wrap .content .right{
width: 280px;
height: 600px;
background: orange;
display: flex;
flex-direction: column;
}
.wrap .content .left .active {
background: linear-gradient(128deg, #fa2f2f 0%, #ff5b36 90%);
}
.wrap .content .right .login{
width: 100%;
}
.wrap .content .right .news{
width: 100%;
}
</style>
</head>
<body>
<div class="wrap">
<div class="header">
<img src="top1.png" />
<img src="top2.png" />
</div>
<div class="content">
<div class="left">
<div class='nav active'>热门</div>
<div class='nav'>头条</div>
<div class='nav'>视频</div>
<div class='nav'>新鲜事</div>
<div class='nav'>榜单</div>
<div class='nav'>搞笑</div>
<div class='nav'>社会</div>
<div class='nav'>时尚</div>
<div class='nav'>电影</div>
<div class='nav'>美女</div>
<div class='nav'>体育</div>
<div class='nav'>动漫</div>
</div>
<div class="center">
<div>
<img class="lunbo" src="lunbo.png" />
</div>
<div class="list">
<div class="item">
<div class="title">丁满：我头天上岗一翻抽屉，就发现这份500万现金合同。范伟你为啥要现金？你以为这么黑的剧组会给你</div>
<div class="posts">
<img src="https://ww4.sinaimg.cn/thumb180/5938279cly1fsff0p6wyuj20m80m8q4w.jpg" />
<img src="https://ww4.sinaimg.cn/thumb180/5938279cly1fsff0qm06rj20u01hc0xg.jpg" />
<img src="https://ww4.sinaimg.cn/thumb180/5938279cly1fsff0okh0oj20u0140jxi.jpg" />
<img src="https://ww4.sinaimg.cn/thumb180/5938279cly1fsff0rppstj20tz1hc0x2.jpg" />
</div>
<div class="footer">
<img src="footer_left.png">
<img src="footer_right.png">
</div>
</div>
<div class="item">
<div class="title">丁满：我头天上岗一翻抽屉，就发现这份500万现金合同。范伟你为啥要现金？你以为这么黑的剧组会给你</div>
<div class="posts">
<img src="https://ww4.sinaimg.cn/thumb180/5938279cly1fsff0p6wyuj20m80m8q4w.jpg" />
<img src="https://ww4.sinaimg.cn/thumb180/5938279cly1fsff0qm06rj20u01hc0xg.jpg" />
<img src="https://ww4.sinaimg.cn/thumb180/5938279cly1fsff0okh0oj20u0140jxi.jpg" />
<img src="https://ww4.sinaimg.cn/thumb180/5938279cly1fsff0rppstj20tz1hc0x2.jpg" />
</div>
<div class="footer">
<img src="footer_left.png">
<img src="footer_right.png">
</div>
</div>
<div class="item">
<div class="title">丁满：我头天上岗一翻抽屉，就发现这份500万现金合同。范伟你为啥要现金？你以为这么黑的剧组会给你</div>
<div class="posts">
<img src="https://ww4.sinaimg.cn/thumb180/5938279cly1fsff0p6wyuj20m80m8q4w.jpg" />
<img src="https://ww4.sinaimg.cn/thumb180/5938279cly1fsff0qm06rj20u01hc0xg.jpg" />
<img src="https://ww4.sinaimg.cn/thumb180/5938279cly1fsff0okh0oj20u0140jxi.jpg" />
<img src="https://ww4.sinaimg.cn/thumb180/5938279cly1fsff0rppstj20tz1hc0x2.jpg" />
</div>
<div class="footer">
<img src="footer_left.png">
<img src="footer_right.png">
</div>
</div>
<div class="item">
<div class="title">丁满：我头天上岗一翻抽屉，就发现这份500万现金合同。范伟你为啥要现金？你以为这么黑的剧组会给你</div>
<div class="posts">
<img src="https://ww4.sinaimg.cn/thumb180/5938279cly1fsff0p6wyuj20m80m8q4w.jpg" />
<img src="https://ww4.sinaimg.cn/thumb180/5938279cly1fsff0qm06rj20u01hc0xg.jpg" />
<img src="https://ww4.sinaimg.cn/thumb180/5938279cly1fsff0okh0oj20u0140jxi.jpg" />
<img src="https://ww4.sinaimg.cn/thumb180/5938279cly1fsff0rppstj20tz1hc0x2.jpg" />
</div>
<div class="footer">
<img src="footer_left.png">
<img src="footer_right.png">
</div>
</div>
</div>
</div>
<div class="right">
<img class='login' src="loginBox.png" />
<img class='news' src="news.png">
</div>
</div>
</div>
</body>
</html>素材+代码下载：