18

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?

enter image description here

6
  • 2
    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. Mar 27, 2017 at 20:46
  • See this post for an explanation: stackoverflow.com/q/34480760/3597276 Mar 27, 2017 at 20:59
  • Or possible with nesting.. but then there would be more than 3 divs.
    – Zim
    Mar 27, 2017 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. Mar 27, 2017 at 21:27
  • here is a float example codepen.io/gc-nomade/pen/ZLKmLm used for an answer of stackoverflow.com/questions/41797496/… (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, 2017 at 21:33

3 Answers 3

20

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>

2
  • and how to do it in a reputable way as table?
    – Macilias
    Oct 24, 2021 at 21:32
  • 1
    @Macilias Look at row-spans, for columns that need to span more than one row. The rest should be pretty straight forward. Oct 25, 2021 at 13:04
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;
}
0

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>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.