Flexbox 3 divs, two columns, one with two rows

Question

I am trying to take

<div></div>
<div></div>
<div></div>

Three sequential divs and turn it into below. Where red is div 1, green is div 2, blue is div 3.

I can do this with floats, something like

.div1 { float: left; }
.div2 { float: left; }
.div3 { float: left; }

But I can't seem to get it working in flexbox, is this possible?

It's simple if you can set a fixed height on the container. Otherwise, no, it's not possible natively with flexbox. You would need an ugly hack. — Michael Benjamin, Mar 27 '17 at 20:46
See this post for an explanation: http://stackoverflow.com/q/34480760/3597276 — Michael Benjamin, Mar 27 '17 at 20:59
Or possible with nesting.. but then there would be more than 3 divs. — Carol Skelly, Mar 27 '17 at 21:05
@ZimSystem, yes, if that's an option, that's a good solution. Simply wrap the two items on the right in a container, which becomes a sibling to the left item. Done. — Michael Benjamin, Mar 27 '17 at 21:27
here is a float example http://codepen.io/gc-nomade/pen/ZLKmLm used for an answer of http://stackoverflow.com/questions/41797496/responsive-flexbox-layout-wrap-issue/41797709 (flex and grid are also options (for 3 siblings) only grid will allow to let height aside ... but not really yet avalaible :( — G-Cyrillus, Mar 27 '17 at 21:33
I've added an alternative solution to this problem here: https://stackoverflow.com/a/46658205/4682834 — Shave Mad Ox, Oct 10 '17 at 03:36

UncaughtTypeError · Accepted Answer · 2020-08-03T08:26:33.840

The Legit Method:
*Recommended

.flex-row {
    flex-direction: row;
    display: flex;
}

.flex-column {
    flex-direction: column;
    display: flex;
}

.flex-body {
    display: flex;
}

.flex-body div:not([class*="flex"]) {
    border: 1px solid white;
    flex: 1 1 200px;
    width: 300px;
}

<div class="flex-body">
  <div class="flex-row">
    <div style="background: #0980cc;"></div>
  </div>
  <div class="flex-column">
    <div style="background: #09cc69;"></div>
    <div style="background: #cc092f;"></div>
  </div>
</div>

The Hackish Method:
*Not Recommended (I'm sure you'll notice why)

.flex-body {
    display: flex;
    flex-direction: row-reverse;
    flex-wrap: wrap;
    justify-content: flex-end;
    align-content: stretch;
    align-items: stretch;
    transform: rotate(90deg);
    max-width: 500px;
    margin: auto;
}

.flex-body div {
    border: 1px solid white;
    height: 300px;
    flex: 1 1 200px;
}

.flex-body div:last-of-type {
    flex: 1 1 300px;
    height: 300px;
}

<div class="flex-body">
  <div style="background: #0980cc;"></div>
  <div style="background: #09cc69;"></div>
  <div style="background: #cc092f;"></div>
</div>

@Macilias Look at row-spans, for columns that need to span more than one row. The rest should be pretty straight forward. — UncaughtTypeError, Oct 25 '21 at 13:04

Carol Skelly · Answer 2 · 2020-04-01T13:41:14.427

10

After thinking about this a little more, it is possible with flexbox. The container just has to have a defined height (%, px or vh) will work.

http://codeply.com/go/U1DCKAx85d

body {
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  height: 100vh;
}

.a {
  flex: 0 0 100%;
  background: red;
}

.b, .c {
  flex: 0 0 50%;
  background: green;
}

.c {
  background: blue;
}

edited Apr 01 '20 at 13:41

answered Mar 31 '17 at 01:40

Carol Skelly

351,302
90
710
624

Teocci · Answer 3 · 2021-12-22T08:57:05.667

Using flexbox is very simple, you just need a container for these three div elements.

Let's define a div with a .box class and add the div elements. Also let's add three classes for the colors: .red, .green and .blue and two classes to handle the columns left and right.

<div class="box">
    <div class="left red"></div>
    <div class="right green"></div>
    <div class="right blue"></div>
</div>

Now we define the box class as a flexbox:

.box {
    display: flex;
    ...
}

Then we define the direction as column (vertical) and if it can be flowed wrap:

.box {
    ...
    flex-flow: column wrap;
    ...
}

Also, we can define the dimensions of the div elements. left will be 45% of the parent width and 100% of the parent height.

.left {
    width: 45%;
    height: 100%;
}

While right will be 55% of the parent width and 50% (half) of the parent height.

.right {
    width: 55%;
    height: 50%;
}

Full example:

.box {
  display: flex;
  flex-flow: column wrap;
  width: 400px;
  height: 100px;
}

.red {
  background: #cc092f;
}

.green {
  background: #09cc69;
}

.blue {
  background: #0980cc;
}

.left {
  width: 45%;
  height: 100%;
}

.right {
  width: 55%;
  height: 50%;
}

<div class="box">
  <div class="left red"></div>
  <div class="right green"></div>
  <div class="right blue"></div>
</div>

Flexbox 3 divs, two columns, one with two rows

3 Answers3

Linked

Related