如何用不同大小的项目制作一个弹性盒画廊？ [复制]答案

【问题标题】：How to make a flex-box gallery with items of different size? [duplicate]如何用不同大小的项目制作一个弹性盒画廊？ [复制]
【发布时间】：2017-07-03 21:50:01
【问题描述】：

我正在尝试使用弹性框（Bootstrap 4）制作类似于下图（上半部分）的东西。

但是，正如您在上图的第二部分和代码中看到的那样（请展开 sn-p），我无法将绿色方块（数字）4 推到数字 1（红色）和数字 2 之间（黄色）如图所示。我的意思是，红色方块和绿色方块之间有一个间隙，我想删除它。

<head>
  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet">



</head>

<body>

  <!--main-->
  <div class="container">
    <!--projects-->
    <div style="background-color:PINK" class="col-12">
      <div class="row">

        <div class="d-flex flex-wrap ">

          <div style="background-color: red; width: 370px; height: 258px; padding: 1.5rem; ">1</div>
          <div style="background-color: yellow; width: 370px; height: 516px; padding: 1.5rem; ">2</div>
          <div style="background-color: blue; width: 370px; height: 258px; padding: 1.5rem; ">3</div>
          <div style="background-color: green;  width: 370px; height: 258px; padding: 1.5rem; ">4</div>
          <div style="background-color: orange; width: 370px; height: 516px; padding: 1.5rem;">5</div>
          <div style="background-color: white;  width: 370px; height: 258px; padding: 1.5rem;">6</div>
          <div style="background-color: paleturquoise;  width: 370px; height: 258px; padding: 1.5rem;">7</div>
          <div style="background-color: purple;  width: 370px; height: 258px; padding: 1.5rem;">8</div>
          <div style="background-color: mediumaquamarine;  width: 370px; height: 258px; padding: 1.5rem;">9</div>
          <div style="background-color: mediumslateblue;  width: 370px; height: 258px; padding: 1.5rem;">10</div>

        </div>

      </div>
    </div>
  </div>

  <body>

【问题讨论】：

@Paulie_D 为什么重复？？？你能告诉我另一个帖子在哪里吗？
“其他”帖子链接在您问题的顶部。
另见：stackoverflow.com/q/34480760/3597276

标签： twitter-bootstrap css flexbox

【解决方案1】：

要使这种设计与 flex-box 一起使用，您必须将 1、4、6、8 分组到一个 flex-box 列中。 AFAIK 如果没有一个以上的容器元素，使用 flex box 是不可能实现您正在寻找的结果的。

【讨论】：