Html 具有可扩展子项的flexbox

我有这个布局的开始布局。内部的框可以在高度描述文本中展开。如果框展开，则行不应仅受列的影响。我用的是bootstrapgrid

此外，内盒是可过滤和响应，因此它们不能被包装在一个单一的列

这可能吗

当前行为： 问题是，同一行中的框也会增加高度

起始布局：

所需布局：

html

---

我看到的最快的方法是，首先将它划分为您希望在页面或容器上显示的列数，然后当您希望在单个列中展开行时，它不会影响多个表单元格和列的整行。然后，您可以在每个列的内部使用flex以任意方式进行布局，但在本例中，您可能只需要使用引导网格就可以轻松地对其进行管理。 对于更具动态性的网页，您可以使用Jquery添加引导类col-xs-12 col-sm-4，具体取决于您想要的列数，并使用相同的想法将文章划分为您想要的列数。 变量$clickme=$'。clickme'， $box=$'.box'； $box.hide； $clickme.click函数{ $this.text$this.text=='Hide'？'Show'：'Hide'.next'.box'.slideToggle； e、 防止违约； }; 黄先生{ 背景：黄色 } .粉红{ 背景：粉红色 } 格雷先生{ 背景：灰色 } .文章{ 背景：番茄； 保证金：5px； 显示器：flex； 弯曲方向：立柱； } .第条img{ 宽度：100%； } 1. 2. 三,

Lorem Ipsum只是印刷和排版行业的虚拟文本

4. 5. 6. 七,

乱数假文

---

那有什么用？它如何回答这个问题？请不要只是脱口而出@Rob抱歉，我赶时间，但是我添加了一些文本。我在.article类中用图像和文本更新了代码，以便使用flex使代码更清晰。希望对你有点帮助！在我这方面的问题是，内部的盒子。文章是可过滤和响应的。所以我不能把它们放在一列中。你应该看看css网格显示：网格。

+-------------------+
| +---+ +---+ +---+ |
| |   | |   | |   | |
| +---+ +---+ +---+ |
| +---+ +---+ +---+ |
| |   | |   | |   | |
| +---+ +---+ +---+ |
+-------------------+

+-------------------+
| +---+ +---+ +---+ |
| |   | |   | |   | |
| |   | +---+ +---+ |
| |   | +---+ +---+ |
| +---+ |   | |   | |
| +---+ +---+ +---+ |
| |   |             |
| +---+             |
+-------------------+

<div class="row">
    <div class="col-4"></div>
    <div class="col-4"></div>
    <div class="col-4"></div>
    <div class="col-4"></div>
    <div class="col-4"></div>
    <div class="col-4"></div>
</div>