Wrap the content of a flex column around another flex column

问题

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>

回答1:

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.

来源：https://stackoverflow.com/questions/43821629/wrap-the-content-of-a-flex-column-around-another-flex-column

标签

html

css

css3

flexbox

css-grid