Question

我一直在使用带有flex-basis过渡的flexbox来处理图像库，以在悬停时增加和缩小元素。我在调整图库以使用flex-wrap打破第5个元素后的下一行时遇到问题。

我希望它起作用的方式是，每行有5个元素，它们在同一行上会不断增长和缩小。在容器中放置了第六个元素后，我想中断到下一行，并使这些元素继续按预期运行（包括转换）。

元素会拉伸以填充可用空间（5个元素中的每个元素的宽度为20％）
->悬停时，其他元素缩小5％，总计减少20％
悬浮元素增长到40％
移至下一行的第六个元素继承了可用空间的大小
第七个元素占行的50％，第八个33.3％...等。

这是我目前拥有的：https://codepen.io/TommyBoyLab/pen/YdzGjB

（改编自：https://codepen.io/joliveras/pen/GpLVKv）

元素的HTML

<div class="container">
  <div class="item" style="background:url() center/cover">

CSS：

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.container {
  display: flex;
  flex-flow: row wrap;
  width: 100%;
}
.container .item {
  display: grid;
  position: relative;
  flex: 1;
  transition: 500ms;
  min-width: 15%;
  max-width: 20%;
  height: 50vh;
}
.container .item:hover {
  transition: 500ms;
  max-width: 40%;
  flex-grow: 1;
}
.container .content {
  margin: auto;
  font-size: 1.5em;
}

Answer 1

似乎您只需要在悬停时增加flex-grow的值：

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.container {
  display: flex;
  flex-flow: row wrap;
  width: 100%;
}
.container .item {
  display: grid;
  position: relative;
  flex: 1;
  transition: 500ms;
  min-width: 15%;
  max-width: 20%;
  height: 50vh;
  
}
.container .item:hover {
  transition: 500ms;
  max-width: 40%;
  flex-grow: 5;
}
.container .content {
  margin: auto;
  font-size: 1.5em;
}

<div class="container">
  <div class="item" style="background:url(https://images.unsplash.com/photo-1544227966-c89fe5bc0904?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1644&q=80) center/cover">
    <div class="content">
      <h3>Title</h3>
      <p>Lorem ipsum amet</p>
    </div>
  </div>
  <div class="item" style="background:url(https://images.unsplash.com/photo-1544090372-c1fe7f8dee5a?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1050&q=80) center/cover">
    <div class="content">
      <h3>Title</h3>
      <p>Lorem ipsum amet</p>
    </div>
  </div>
  <div class="item" style="background:url(https://images.unsplash.com/photo-1544200502-6652e105f865?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1500&q=80) center/cover">
    <div class="content">
      <h3>Title</h3>
      <p>Lorem ipsum amet</p>
    </div>
  </div>
  <div class="item" style="background:url(https://images.unsplash.com/photo-1544227966-c89fe5bc0904?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1644&q=80) center/cover">
    <div class="content">
      <h3>Title</h3>
      <p>Lorem ipsum amet</p>
    </div>
  </div>
  <div class="item" style="background:url(https://images.unsplash.com/photo-1544090372-c1fe7f8dee5a?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1050&q=80) center/cover">
    <div class="content">
      <h3>Title</h3>
      <p>Lorem ipsum amet</p>
    </div>
  </div>
  <div class="item" style="background:url(https://images.unsplash.com/photo-1544200502-6652e105f865?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1500&q=80) center/cover">
    <div class="content">
      <h3>Title</h3>
      <p>Lorem ipsum amet</p>
    </div>
  </div>
  <div class="item" style="background:url(https://images.unsplash.com/photo-1544200502-6652e105f865?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1500&q=80) center/cover">
    <div class="content">
      <h3>Title</h3>
      <p>Lorem ipsum amet</p>
    </div>
  </div>
  <div class="item" style="background:url(https://images.unsplash.com/photo-1544227966-c89fe5bc0904?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1644&q=80) center/cover">
    <div class="content">
      <h3>Title</h3>
      <p>Lorem ipsum amet</p>
    </div>
  </div>
  <div class="item" style="background:url(https://images.unsplash.com/photo-1544090372-c1fe7f8dee5a?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1050&q=80) center/cover">
    <div class="content">
      <h3>Title</h3>
      <p>Lorem ipsum amet</p>
    </div>
  </div>
  <div class="item" style="background:url(https://images.unsplash.com/photo-1544200502-6652e105f865?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1500&q=80) center/cover">
    <div class="content">
      <h3>Title</h3>
      <p>Lorem ipsum amet</p>
    </div>
  </div>

</div>

Answer 2

除了CSS：

BloggingContext()

使用flex-wrap打破第5个元素之后的下一行的问题。

2 个答案: