CSS分享flex布局，实现商品列表展示容器。（可自行扩展）

最新推荐文章于 2024-09-05 10:31:00 发布

罗伯特杰

最新推荐文章于 2024-09-05 10:31:00 发布

阅读量806

点赞数 1

文章标签： css html css3

本文链接：https://blog.csdn.net/weixin_56522476/article/details/128124827

版权

演示：每行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;
}