CSS - display:table 与 display:flex 作为子子 div答案

【问题标题】：CSS - display:table with display:flex as sub-child divCSS - display:table 与 display:flex 作为子子 div
【发布时间】：2017-04-04 21:11:14
【问题描述】：

我有一个带有 display:table; 的 div。在那个 div 中，我有 2 个 div。 1个div有width:100%，div2有width:320px

在 div1 中，我有多行，每行最多有 3 个 div（有些有 1 或 2 个）。我正在使用display:flex; justify-content:space-around; 很好地垂直和水平对齐行及其 div。

这里的问题是，当我使用display:flex; 时，div2 的所有内容都被推到最后一行之下。这很奇怪，因为 div1 和 div2 彼此相邻，并且 div1 的内容不会干扰 div2。

问题的视觉示例：

====================================
=        div1          =    div2   =
====================================
=         +++          =           =
=         +++          =           =
=                      =           =
=    +++  +++  +++     =           =
=    +++  +++  +++     =           =
=                      =           =
=    +++  +++  +++     =           =
=    +++  +++  +++     =           =
=                      =  content  =
=                      =     of    =
=                      =    div2   =
=                      =   starts  =
=                      =    here   =
====================================

each ++ is a div inside a row
     ++

无论如何我可以正确完成这件事吗？ div1 和 div2 彼此相邻，而 div1 内容使用display:flex; justify-content:space-around;，而 div2 内容从顶部开始，不会被 div1 内容下推。

编辑：
这是我的 jsFiddle，用于显示错误。 https://jsfiddle.net/3uss54pc/

编辑 2：
我尝试删除display:flex，而是在.row-div 上使用float:left;，并在每个.row 的和处添加clear:both;，但div2 的内容仍在被向下推。

我猜这不是display:flex;的问题，而是我的display:table;的结构问题？？

【问题讨论】：

如果你可以使用 Bootstrap 那么你应该使用它。它会帮助你
请通过提供 JSFiddle 或 CodePen 添加起点。另请参阅stackoverflow.com/help/mcve
@Ankit Bootstrap 并不是总是的答案，请记住，Bootstrap 在实现提问者想要的需求方面有些过分。
@Roy 这只是一个建议，我很确定 OP 想要响应能力，而不需要用 CSS 和类似的情况编写媒体查询。
@Ankit 一个建议实际上是有道理的，现在你要求建造一座城堡来停放你的割草机。

标签： css flexbox css-tables

【解决方案1】：

我通过删除flex 元素并改用display:table 和display:table-cell; 解决了这个问题。这样 div2 的内容就会显示在正确的位置。

【讨论】：