将一个 flex 列的内容围绕另一个 flex 列排列

Question

将一个 flex 列的内容围绕另一个 flex 列排列

htmlcssflexboxcss-grid

3

我希望CONTENT列能够环绕左侧的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>

- Steven Ellen Starar

Flexbox并不是为了将元素包裹在其他元素周围而设计的。它只能沿着列或行对齐元素。这里有一个更完整的解释：https://dev59.com/QFsW5IYBdhLWcg3w4qiw#34481128 - Michael Benjamin

@Michael_B 感谢您的解释！Grid 能做到这个吗？ - Steven Ellen Starar

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Michael Benjamin · Accepted Answer

在flex布局中，元素可以沿着列或行对齐。一个flex项目不能跨越列和行，这可能导致一个项目的内容围绕着另一个项目包裹。因此，flexbox不是实现布局的好选择。阅读更多。在grid布局中，元素可以跨越列和行。一个网格项目可以被配置为占据尽可能多的行和列，从而允许一个项目的内容围绕其他项目包裹，除了目前存在的一个限制： 网格区域必须是矩形的。

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

9. 放置网格项

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

7.3. 命名区域: grid-template-areas 属性

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

注意：非矩形或不连通的区域可能在此模块的未来版本中被允许。

因此，可预见的未来不可能出现类似俄罗斯方块形状的网格区域，这会使您的布局简单易懂。

要让文本环绕图像，请使用经典的float属性。毕竟，这正是它被设计用来做的。

如果您考虑在弹性或网格容器内部使用float，那么它将无法工作。在flex formatting context和grid formatting context中都会忽略浮动。