CSS Flexbox包装-如何在大项目之前填充行

debugcn 发表于 Dev

威比特

我不确定是否可行。我什至可能认为这不太可能。但我想确定。我的目标是在专辑封面视图中发挥iTunes音乐播放器的作用。意味着我有一个大小相同的项目列表，可以很好地逐行包装。

| A | | B | | C |
| D | | E | | F |
| G | | H |

这只是display: flex; flex-wrap: wrap; justify-content: space-around;在容器上。现在，我想在单击其中一项时有条件地渲染其他组件。假设项目B被点击，“横幅” Banner-B打开。此横幅应采用完整宽度，以换行到下一行。但是我很想在项目B所在的行中装满较小的项目，直到不再适合它为止。所以现在看起来像这样：

  | A |   | B |
|    Banner-B   |
| C | | D | | E |
| F | | G | | H |

我想使其呈现如下所示：

| A | | B | | C |
|    Banner-B   |
| D | | E | | F |
| G | | H |

有什么想法如何或是否有可能？谢谢你的帮助！

陪同Afif

CSS网格可以做到这一点。使用悬停的示例，您可以轻松将其更改为单击事件

.container {
   display:grid;
   grid-template-columns:repeat(3, 1fr);
   grid-auto-flow:dense; /* this will do all the magic */
   grid-gap:3px;
}

.container > div {
  padding:10px;
  border:2px solid red;
}

.container > section {
  grid-column:1 / -1; /* take full width */
  padding:20px;
  border:2px solid blue;
  display:none;
}
.container > div:hover + section {
  display:block;
}

<div class="container">
 <div>A</div><section>Info A</section>
 <div>B</div><section>Info B</section>
 <div>C</div><section>Info C</section>
 <div>D</div><section>Info D</section>
 <div>E</div><section>Info E</section>
 <div>F</div><section>Info F</section>
 <div>G</div><section>Info G</section>
 <div>H</div><section>Info H</section>
 <div>I</div><section>Info I</section>
</div>

space-around包装的配置：

.container {
   display:grid;
   grid-template-columns:repeat(auto-fit, 150px);
   justify-content:space-around;
   grid-auto-flow:dense; /* this will do all the magic */
   grid-gap:3px;
}

.container > div {
  padding:10px;
  border:2px solid red;
}

.container > section {
  grid-column:1 / -1; /* take full width */
  padding:20px;
  border:2px solid blue;
  display:none;
}
.container > div:hover + section {
  display:block;
}

body {
 min-height:150vh;
}

<div class="container">
 <div>A</div><section>Info A</section>
 <div>B</div><section>Info B</section>
 <div>C</div><section>Info C</section>
 <div>D</div><section>Info D</section>
 <div>E</div><section>Info E</section>
 <div>F</div><section>Info F</section>
 <div>G</div><section>Info G</section>
 <div>H</div><section>Info H</section>
 <div>I</div><section>Info I</section>
</div>

也像下面的auto-fill配置

.container {
   display:grid;
   grid-template-columns:repeat(auto-fill, minmax(150px,1fr));
   grid-auto-flow:dense; /* this will do all the magic */
   grid-gap:3px;
}

.container > div {
  padding:10px;
  border:2px solid red;
}

.container > section {
  grid-column:1 / -1; /* take full width */
  padding:20px;
  border:2px solid blue;
  display:none;
}
.container > div:hover + section {
  display:block;
}

body {
 min-height:150vh;
}

<div class="container">
 <div>A</div><section>Info A</section>
 <div>B</div><section>Info B</section>
 <div>C</div><section>Info C</section>
 <div>D</div><section>Info D</section>
 <div>E</div><section>Info E</section>
 <div>F</div><section>Info F</section>
 <div>G</div><section>Info G</section>
 <div>H</div><section>Info H</section>
 <div>I</div><section>Info I</section>
</div>

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。