display:flex实现响应式布局
display:flex实现响应式布局
<body>
<div class="demo">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
</body>
<style>
.demo{
width: 100%;
display: flex;
justify-content: space-around;
align-items: flex-end;
flex-wrap: wrap;
}
.demo .item{
width: 300px;
height: 50px;
background: #444;
margin-bottom: 20px;
}
</style>