css三栏等宽布局

实现以下效果：数据来源于后端，使用 for 循环

思路：

1.使用flex布局：

display:flex;

flex-wrap: wrap;//超出自动换行

2.设置合适的margin值

 

书和书之间的距离是70px,那么每个书的margin设置为margin:35px

这样整体会增加70px,所以要整体

margin:0 - px2rem(35) 0;

html:

<div class="book-content">
    <div class="book-list">
      <img src="/images/1.jpg" alt="">
    </div>
    <div class="book-list">
      <img src="/images/1.jpg" alt="">
    </div>
    <div class="book-list">
      <img src="/images/1.jpg" alt="">
    </div>
    <div class="book-list">
      <img src="/images/1.jpg" alt="">
    </div>
    <div class="book-list">
      <img src="/images/1.jpg" alt="">
    </div>
    <div class="book-list">
      <img src="/images/1.jpg" alt="">
    </div>
    <div class="book-list">
      <img src="/images/1.jpg" alt="">
    </div>
    <div class="book-list">
      <img src="/images/1.jpg" alt="">
    </div>
  </div>

 css:

.book-content {
  padding: px2rem(68) px2rem(85) 0;
  margin:0 - px2rem(35) 0;
  display: flex;
  flex-wrap: wrap;
  .book-list{
    width: px2rem(308);
    height: px2rem(440);

    margin:0 px2rem(35) px2rem(110);
    img{
      width: px2rem(308);
      height: px2rem(440);
      border-radius: px2rem(18);
    }
  }
}