在学习使用新的知识,最直观的方式就是用一段代码来展示学习。其实在flex布局中,我们可以用最简单的代码写出好看的页面。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>使用flex布局的列表页面</title>
<style>
.list {
}
.item {
display: flex;
flex-direction: row;
align-items: stretch;
flex-wrap: nowrap;
border-bottom:1px solid #f0f0f0;
padding:10px;
box-shadow: 0px 0px 1px 0px rgba(255,0,0,.3);
margin-bottom:10px;
}
.avatar .image{
width: 80px;
height: 80px;
display: block;
border-radius: 40px;
box-shadow: 0px 0px 7px 0px rgba(0,0,0,.5);
margin-right:10px;
}
.detail{
font-size:14px;
color:#636363;
}
.name{
display:flex;
align-items: center;
margin-bottom:5px;
}
.text{
font-size:16px;
}
.icon{
height:30px;
display:block;
}
</style>
</head>
<body>
<div class="list">
<div class="item">
<div class="avatar">
<img class="image" src="http://img3.imgtn.bdimg.com/it/u=1368451564,780267377&fm=11&gp=0.jpg" style=""/>
</div>
<div class="info">
<div class="name">
<div class="text">
独守空城忆旧梦
</div>
<img class="icon" src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=2527158049,2452248245&fm=26&gp=0.jpg"/>
</div>
<div class="detail">
任何时候都要记得,给人生留点余地,得到时不自喜,失去时不抑郁。留一点好处让别人占,留一点道路让别人走,留一点时间让自己思考。
</div>
</div>
</div>
<div class="item">
<div class="avatar">
<img class="image" src="http://img0.imgtn.bdimg.com/it/u=4009057249,2530456353&fm=26&gp=0.jpg" style=""/>
</div>
<div class="info">
<div class="name">
<div class="text">
对你微笑纯粹出于礼貌ˇ
</div>
<img class="icon" src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=2527158049,2452248245&fm=26&gp=0.jpg"/>
</div>
<div class="detail">
胆量不够大,能力再强都是小人物!魄力不够大,努力一生都是小成就!在成长的路上,我们突破的不是现实,而是自己。在人生的跑道上,战胜对手,只是赛场的赢家,战胜自己,才是命运的强者。
</div>
</div>
</div>
<div class="item">
<div class="avatar">
<img class="image" src="http://img0.imgtn.bdimg.com/it/u=1813762643,1914315241&fm=26&gp=0.jpg" style=""/>
</div>
<div class="info">
<div class="name">
<div class="text">
☆⌒糖罐子℡
</div>
<img class="icon" src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=2527158049,2452248245&fm=26&gp=0.jpg"/>
</div>
<div class="detail">
不忘初心,方得始终。只有走过弯路,才更确信当初最想要的是什么。有些事,想多了头疼,想通了心疼。人生旅途,不是每一段旅行都要邂逅,也不是每一段生命都需要故事,就算多数时间都是一个人孤单且平淡在走,只要足够有爱,就不会寂寞。
</div>
</div>
</div>
</div>
</body>
</html>