将Flex列的内容包裹在另一个Flex列中 [英] Wrap the content of a flex column around another flex column

问题描述

我有这个：

我必须用表格重做所有这些，或者是否可以在另一个表格上包装一个flex列？

< div id =containerclass =flexChild rowParent> < div id =rowChild592class =flexChild> < H1>< / H1> < div class =socialwrap>< / div> < / DIV> < div id =flexymenuclass =flexChild columnParent> < div id =columnChild85412class =flexChild rowParent> < div id =rowChild97758class =flexChild>< / div> < div id =rowChild52237class =flexChild>< / div> < / DIV> < div id =columnChild59385class =flexChild selected> < div class =frame> CONTENT< / div> < / DIV> < / div>< / div>

解决方案

在 弹性布局 元素可以沿列或行对齐。 Flex项目不能跨越列和行之间，这可能允许一个项目的内容环绕另一个项目。所以，flexbox不是实现布局的好选择。 阅读更多。

在和，而不是 元素。 >行。一个网格项目可以配置为占用尽可能多的行和列，这将允许一个项目的内容环绕其他项目，除了（对于当前的一个限制）：网格区域必须是矩形的。

这个行为在spec的两个部分定义。

< blockquote>

9。放置网格
Items

每个网格物体都有一个网格区域，一个矩形的网格单元格集合

---

7.3。命名空间： grid-template-areas
property

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

注意：非

---

$ b $在
未来版本的模块中允许使用矩形或断开连接的区域。因此，在可预见的未来，俄罗斯方块形网格区域是不可能的，这将使您的布局简单和容易。

要围绕图像，坚持良好的醇' float 属性。毕竟，这正是它设计的目的。

如果您正在考虑在flex或网格容器中使用 float ，那么它将不起作用。浮动在 flex格式化上下文中被忽略 和 网格格式上下文 。

I'd like the CONTENT flex column to wrap around the left-hand rowChild592 column.

I have this:

I'd like it to look something like this:

I saw an answer here about making a div set to a table cell wrap around:

• Wrapping table content around a floating div across multiple rows

Would I have to redo all of this with a table, or is it possible to wrap a flex column around another?

.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>

解决方案

In flex layout, elements can be aligned along columns or rows. A flex item cannot span between both columns and rows, which could allow the content of one item to wrap around another item. So, flexbox is not a good option for achieving your layout. Read more.

In grid layout, elements can span across columns and rows. A grid item can be configured to take up as many rows and columns as desired, which would allow for the content of one item to wrap around other items, except for one limitation currently in place: The grid area must be rectangular.

This behavior is defined in two parts of the spec.

9. Placing Grid Items

Every grid item has a grid area, a rectangular set of grid cells that the grid item occupies.

---

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

If a named grid area spans multiple grid cells, but those cells do not form a single filled-in rectangle, the declaration is invalid.

Note: Non-rectangular or disconnected regions may be permitted in a future version of this module.

---

So, for the foreseeable future, tetris-shaped grid areas are not possible, which would make your layout simple and easy.

To wrap your text around images, stick to the good ol' float property. After all, this is exactly what it was designed to do.

And if you're thinking about using float inside a flex or grid container, it won't work. Floats are ignored in both a flex formatting context and grid formatting context.

这篇关于将Flex列的内容包裹在另一个Flex列中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！