CODEWITHSUNDEEP
cssflexbox
eXception
eXception

Reputation: 2301

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

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 <div> 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?

Upvotes: 1

Views: 1309

Answers (2)

Alexander Belokon
Alexander Belokon

Reputation: 1522

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;
      }
<div class="flex-row" style="width: 600px; background: steelblue">
  <div class="flex-column flex-75 space-between">
    <div class="flex-inline space-evenly">  
      <div class="item">D</div>
      <div class="item">D</div>
    </div>
    <div class="flex-inline space-evenly">
      <div>
        <div class="item">A</div>
        <div class="item">A</div>
        <div class="item">A</div>
      </div>
      <div>
        <div class="item">B</div>
        <div class="item">B</div>
        <div class="item">B</div>
      </div>
    </div>
  </div>
  <div class="flex-column flex-25">
    <div class="item">C</div>
    <div class="item">C</div>
    <div class="item">C</div>
    <div class="item">C</div>
    <div class="item">C</div>
  </div>
</div>

Upvotes: 1

Will Maradiaga
Will Maradiaga

Reputation: 96

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;
}
<body>
  <div class="container">
    <div class="left-container">
      <div class="block-d">
        D
      </div>
      <div class="inner-container">
        <div class="block-a">
          A
        </div>
        <div class="block-b">
          B
        </div>
      </div>
    </div>
    <div class="block-c">
      C
    </div>
  </div>
</body>

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

Upvotes: 1

Related Questions