演示:每行3个容器
盒子容器里面放什么自己定。没什么技术,复用代码罢了。
HTML:
<div class="parent">
<div class="child">
<div class="image_box"></div>
<div class="detail_box">
<div class="detail">
<div class="tile"></div>
<div class="price"></div>
</div>
<button class="into" >按钮</button>
</div>
</div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
</div>
CSS:
.parent {
width: 100%;
height: 100%;
/*弹性布局*/
display: flex;
flex-flow: row wrap;
/*可理解以盒子的左上角开始布局元素*/
align-content: flex-start;
}
.child {
margin: 0;
/*固定盒子大小防止变形*/
box-sizing: border-box;
flex: 0 0 33%;
height: 300px;
border: 1px solid red;
/*弹性布局*/
display: flex;
/*换行*/
flex-wrap: wrap;
/*居中*/
justify-content:center;
}
.image_box{
margin-top: 5%;
height: 60%;
width: 90%;
border: 1px solid red;
}
.detail_box{
height: 20%;
width:90%;
border: 1px solid red;
display: flex;
}
.detail{
width:65%;
height:90%;
/*靠右*/
margin-right: auto;
/*弹性布局*/
display: flex;
/*换行*/
flex-wrap: wrap;
/*居中*/
}
.tile{
width:100%;
height:50%;
border: 1px solid red;
}
.price{
width:100%;
height:50%;
border: 1px solid red;
}
.into{
width:25%;
height:50%;
margin-top: 30px;
/*靠左*/
margin-left: auto;
}