将flex列的内容包裹在另一个flex列周围

Question

我想将CONTENT flex列包裹在左侧rowChild592列中。

我有这个：

我希望它看起来像这样：

我在这里看到一个关于将div设置为表格单元格的答案：

• Wrapping table content around a floating div across multiple rows

我是否必须使用表格重做所有这些，或者是否可以将Flex列包裹在另一个表格周围？

.rowParent,
.columnParent {
  display: flex;
}

.columnParent {
  flex-direction: column;
}

.flexChild {
  flex: 1;
}

#flexymenu {
  flex-grow: 2;
  height: 100%;
}

.frame {
  display: block;
  margin: 0 auto;
}

.socialwrap {
  display: flex;
}

<div id="container" class="flexChild rowParent">
  <div id="rowChild592" class="flexChild">
    <h1></h1>
    <div class="socialwrap"></div>
  </div>
  <div id="flexymenu" class="flexChild columnParent">
    <div id="columnChild85412" class="flexChild rowParent">
      <div id="rowChild97758" class="flexChild"></div>
      <div id="rowChild52237" class="flexChild"></div>
    </div>
    <div id="columnChild59385" class="flexChild selected">
      <div class="frame">CONTENT</div>
    </div>
  </div>
</div>

Answer 1

在flex layout中，元素可以按列或行对齐。 Flex项不能跨越列和行，这可能允许一个项的内容环绕另一个项。因此，flexbox不是实现布局的好选择。 Read more.

在grid layout中，元素可以跨越和列。可以将网格项配置为根据需要占用尽可能多的行和列，这将允许一个项目的内容环绕其他项目除以适用于当前的一个限制：网格区域必须为矩形。

此行为在规范的两个部分中定义。

  

9. Placing Grid Items

     

每个网格项都有一个网格区域，一组矩形网格单元格   网格项占用。

  

7.3. Named Areas: the grid-template-areas property

     

如果命名网格区域跨越多个网格单元格，但这些单元格不会   形成一个填充矩形，声明无效。

     

注意：a中可以允许非矩形或断开连接的区域   该模块的未来版本。

因此，在可预见的未来，俄罗斯方块形的网格区域是不可能的，这将使您的布局简单易行。

要将图片包装在图像周围，请坚持使用好的float属性。毕竟，这正是它的设计目标。

如果你正考虑在flex或grid容器中使用float，那么它将无效。 flex formatting context和grid formatting context都会忽略浮点数。