首页 文章

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

提问于
浏览 次
2

我一直在使用flexbox创建一个图像库，它具有基于flex的基础转换，可以在悬停时增大和缩小元素 . 我在修改图库时遇到问题，使用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;
}
html css flexbox flex-grow

2 回答

  • 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>
    回复于
  • 1

    我使用：nth-child伪选择器并更新min-width解决了我自己的问题 .

    最终添加到CSS：

    .item:first-child:nth-last-child(n + 5),
.item:first-child:nth-last-child(n + 5) ~ *{
    min-width: 17%;

}
    回复于

相关问题