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

演示：每行 3 个容器

盒子容器里面放什么自己定。没什么技术，复用代码罢了。

HTML：

    

      

      

        

          

          

        
         按钮 
      

    
    

    

    

    

    

  

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;
}