html - 如何使用带有 flexbox 的广告块创建画廊

我想创建一个在右侧有一个广告块的画廊。图库图片应在广告块周围浮动。如果可能的话，我也希望广告块不会“埋没”在较小的屏幕上（或在桌面浏览器中折叠时），但应尽可能高地显示。

但是无论我如何尝试，我都无法解决这个问题。包装盒，以任何可能的方式证明它们，使用订单等均无效。

.wrapper {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.wrapper article {
    border: 1px #ccc solid;
    padding: 10px;
}

article {
    flex: 5;
}

.inner-wrapper {
    display: flex;
    flex-wrap: wrap;
    border: 1px #ccc solid;
    justify-content: center;
    flex-direction: row;
}

.video-box {
    display: flex;
    border: 1px #ccc solid;
    height: 130px;
    width: 190px;
    font-size: 60px;
    font-weight: bold;
    color: white;
    background-color: cornflowerblue;
    align-items: center;
    justify-content: center;
}

.add-box {
    display: flex;
    height: 260px;
    width: 380px;
    font-size: 60px;
    font-weight: bold;
    color: white;
    background-color: orangered;
    align-items: center;
    justify-content: center;
}

<div class="wrapper">
    <article>
        <h2>Videos</h2>
        <div class="inner-wrapper">
                <div class="add-box">Ads</div>
                <div class="video-box">1</div>
                <div class="video-box">2</div>
                <div class="video-box">3</div>
                <div class="video-box">4</div>
                <div class="video-box">5</div>
                <div class="video-box">6</div>
                <div class="video-box">7</div>
                <div class="video-box">8</div>
                <div class="video-box">9</div>
                <div class="video-box">10</div>
                <div class="video-box">11</div>
                <div class="video-box">12</div>
                <div class="video-box">13</div>
                <div class="video-box">14</div>
                <div class="video-box">15</div>
                <div class="video-box">16</div>
                <div class="video-box">17</div>
                <div class="video-box">18</div>
                <div class="video-box">19</div>
                <div class="video-box">20</div>
                <div class="video-box">21</div>
        </div>
    </article>
</div>

结果：



非常感谢除CSS网格以外的任何解决方案（因为它不被支持）。

最佳答案

听起来很像desandro/masonry的用例。

var elem = document.querySelector('.grid');
var msnry = new Masonry(elem, {
  itemSelector: '.grid-item',
  columnWidth: '.grid-sizer',
  percentPosition: true
});

.wrapper {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.wrapper article {
  border: 1px #ccc solid;
  padding: 10px;
}

article {
  flex: 5;
}

.inner-wrapper {
  display: flex;
  flex-wrap: wrap;
  border: 1px #ccc solid;
  justify-content: center;
  flex-direction: row;
}

.video-box {
  display: flex;
  border: 1px #ccc solid;
  height: 130px;
  width: 190px;
  font-size: 60px;
  font-weight: bold;
  color: white;
  background-color: cornflowerblue;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}

.add-box {
  display: flex;
  height: 260px;
  width: 380px;
  font-size: 60px;
  font-weight: bold;
  color: white;
  background-color: orangered;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}

<script src="https://unpkg.com/masonry-layout@4/dist/masonry.pkgd.min.js"></script>
<div class="wrapper">
  <article>
    <h2>Videos</h2>
    <div class="inner-wrapper grid">
      <div class="grid-item add-box">Ads</div>
      <div class="grid-sizer grid-item video-box">1</div>
      <div class="grid-item video-box">2</div>
      <div class="grid-item video-box">3</div>
      <div class="grid-item video-box">4</div>
      <div class="grid-item video-box">5</div>
      <div class="grid-item video-box">6</div>
      <div class="grid-item video-box">7</div>
      <div class="grid-item video-box">8</div>
      <div class="grid-item video-box">9</div>
      <div class="grid-item video-box">10</div>
      <div class="grid-item video-box">11</div>
      <div class="grid-item video-box">12</div>
      <div class="grid-item video-box">13</div>
      <div class="grid-item video-box">14</div>
      <div class="grid-item video-box">15</div>
      <div class="grid-item video-box">16</div>
      <div class="grid-item video-box">17</div>
      <div class="grid-item video-box">18</div>
      <div class="grid-item video-box">19</div>
      <div class="grid-item video-box">20</div>
      <div class="grid-item video-box">21</div>
    </div>
  </article>
</div>

关于html - 如何使用带有 flexbox 的广告块创建画廊，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/56305215/