Search code examples
csslayoutflexboxalignment

Is there a way to get two flexbox items within a row to stack as a column?

I am attempting to build a layout in which I have a parent flexbox div with individual sections within it, the trouble I'm running into is trying to get two of the section elements to stack in a column when the entire layout is as a row.

Currently, there are two sections that occupy the full height of the row, then I have two additional sections which should ideally only be the height of their shorter content, and stack on each other in a single column:: screenshot of current layout

Both the sections I'm trying to stack have these CSS parameters in my attempt to fix this::

flex-basis: 40%;
align-self: flex-start;

And the parent div flex has::

display: -ms-flexbox;
display: flex;
flex-wrap: wrap;
justify-content: flex-start;

Any ideas as to how this might be achieved would be hugely appreciated, thanks!

Solution

  • You are going for a more complex layout than what one level of flexbox can do. A couple of options come to mind:

    You can give the third cell in that row display: flex; flex-direction:column and then nest the smaller divs inside it.

    Or, you can use grid instead of flex. Then you can arrange it three columns, but set certain cells to span multiple columns or rows as you wish. For example:

    .wrapper {
  display: grid;
  grid-template-columns: max-content 1fr 1fr;
}

.stars {
  grid-column: span 3;
}

.left, .middle {
  grid-row: span 2;
}