在弹性布局出来之前呢，我们一边很多时候都是运用盒子模型，定位，浮动来进行我们的结构框架搭建，那么今天呢我来向大家展示一下如何用弹性布局做一个小的demo。
目录
效果展示：
html+css部分：
代码讲解：
效果展示：
结构比较简单，主要是让大家来简单来认识一下弹性布局。
html+css部分：
<style>
.container {
width: 720px;
margin: 30px auto;
}
header {
width: 660px;
margin: 0 auto;
}
h3 {
display: inline-block;
font-size: 20px;
}
header>.more {
float: right;
font-size: 18px;
font-weight: bold;
color: #62666F;
}
/* 弹性布局 */
ul{
margin: 0 40px;
height: 350px;
display: flex;
/* 将元素从左往右排列 */
flex-direction: row;
/* 设置不换行 */
flex-wrap: wrap;
/* 对齐方式 */
justify-content: space-evenly;
align-content: space-evenly;
}
ul a>img{
width: 277px;
height: 106px;
}
ul p{
font-size: 12px;
color: black;
margin-top: 10px;
}
</style>
</head>
<body>
<div class="container">
<header>
<h3>热门活动</h3>
<div class="more">更多</div>
</header>
<main>
<ul>
<li>
<a href="">
<img src="./image/img1.png" alt="">
<p>推荐活动 | 原创音乐现金榜T榜</p>
</a>
</li>
<li>
<a href="">
<img src="./image/img2.png" alt="">
<p>推荐节目|《TAImusic》爆笑来袭</p>
</a>
</li>
<li>
<a href="">
<img src="./image/img3.png" alt="">
<p>推荐歌单 | 继续宠爱张国荣</p>
</a>
</li>
<li>
<a href="">
<img src="./image/img4.png" alt="">
<p>推荐活动| 330金属音乐巡演 成都小酒馆音乐空间</p>
</a>
</li>
</ul>
</main>
</div>
</body>代码讲解：
那么来简单的介绍一下我的代码：
在这里能首先我是让ul标签作为一个flex容器，运用display：flex；来定义
flex-direction: row; 将元素从左往右排列
flex-wrap: wrap; 将元素设置超过最大就换行，默认是不换行
justify-content: space-evenly; 这是弹性布局的一种对齐方式，让容器的子元素也就是项目之间的距离相等，与左右两端的距离等于项目之间的距离。
align-content: space-evenly;和 justify-content一样，不过是设置项目在y轴方向的对齐方式。
弹性布局方面就是运用了以上几点代码，由于本人今天时间有限，之间先出一个demo，让大家先了解了解，后面有时间我会写一期博客专门介绍一下我们的好伙伴———弹性布局（flexbox）。
