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

Question

我希望 CONTENT flex 列环绕左侧的 rowChild592 列。

我有这个：

我希望它看起来像这样：

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

• 将表格内容包裹在多行的浮动 div 周围

我是否必须用一张表重做所有这些，或者是否可以将一个 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 布局中，元素可以沿列或行对齐。弹性项目不能跨越列和行，这可能允许一个项目的内容环绕另一个项目。因此，flexbox 不是实现布局的好选择。阅读更多。

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

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

9. 放置网格项目

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

---

7.3. 命名区域：the grid-template-areas 财产

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

注意：此模块的未来版本可能允许非矩形或断开的区域。

---

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

要将文本包裹在图像周围，请坚持使用 good ol'float属性。毕竟，这正是它的设计目的。

而且，如果您正在考虑float在 flex 或 grid 容器中使用，它就行不通了。浮点数在flex 格式化上下文和网格格式化上下文中都被忽略了。