Flexbox: how to make 2 columns (with 2 children) + 1 column markup looks like 3 columns markup?

Question

I wonder if it's possible to do this with flexboxes.

Initially I had a markup of 3 columns

Markup 1:

|A|  |B|  |C|
|A|  |B|  |C|
|A|  |B|  |C|
|A|  |B|  |C|

(display: flex;, justify-content: space-between;)

Now I need to make a more complex layout.

Markup 2:

 _______
|DDDDDD|  |C|
          |C| 
|A|  |B|  |C|
|A|  |B|  |C|
|A|  |B|  |C|

So, what I did - I put columns |A| and |B| inside a

alongside with a row |D|.

__________
||DDDDDD||  |C|
|        |  |C| 
||A|  |B||  |C|
||A|  |B||  |C|
||A|  |B||  |C|
----------  |C|

But now I can't make the columns to have same space in between. Whatever I do the spaces between the blocks are doesn't feels the same as at the Markup 1.

I either have one of the following results

//This       //Or this    // Or even this
 _______      ______      ______   
|DDDD|  |C|  |DDDDDD||C|  |DDDD||C|
        |C|          |C|        |C| 
|A||B|  |C|  |A|  |B||C|  |A||B||C|
|A||B|  |C|  |A|  |B||C|  |A||B||C|
|A||B|  |C|  |A|  |B||C|  |A||B||C|

But what I need is:

 _______
|DDDDDD|  |C|
          |C| 
|A|  |B|  |C|
|A|  |B|  |C|
|A|  |B|  |C|

Of course I can use margin/padding, but... doesn't feel right. I wonder, how can I achieve that with flexboxes?

user_15245639 · Answer

You can use a grid-template as an alternative, but using flex should be something like this:

.container {
  display: flex;
  justify-content: space-between;
}

.left-container {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 60vw;
}

.inner-container {
  display: flex;
  justify-content: space-between;
}

.block-d, 
.block-a, 
.block-b, 
.block-c {
  text-align: center;
  background-color: lightgray;
}

.block-a,
.block-b {
  width: 25vw;
  height: 85vh;
}

.block-c {
  width: 25vw;
  height: 100vh;
}

You can just play around with the width of the containers.

user_4351182 · Answer

The following example is taking also the spacing you want into account:

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

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

      .flex-inline {
        display: inline-flex;
      }

      .space-evenly {
        justify-content: space-evenly;
      }

      .space-between {
        justify-content: space-between;
      }

      .flex-75 {
        flex: 3 1 auto;
      }

      .flex-25 {
        flex: 1 1 auto;
      }

      .item {
        background-color: lightblue;
        width: 50px;
        text-align: center;
        line-height: 50px;
        font-size: 12px;
      }

Flexbox: how to make 2 columns (with 2 children) + 1 column markup looks like 3 columns markup?

2 Answers