在弹性布局出来之前呢，我们一边很多时候都是运用盒子模型，定位，浮动来进行我们的结构框架搭建，那么今天呢我来向大家展示一下如何用弹性布局做一个小的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）。
