CODEWITHSUNDEEP
htmlcssflexbox
piedude
piedude

Reputation: 131

How can I accomplish this design with flexbox?

I'm trying to accomplish this design by using flexbox:

It's supposed to be a one page website. 

  .container {
      display: flex;
    }

    .big {
      flex: 2;
      height: 70vh;
      background: gray;
    }

    .small {
      flex: 1;
      height: 70vh;
      background: gray;
    }
<div class="container">
      <div class="small">
      </div>
      <div class="smallest">
      </div>
      <div class="big">
      </div>
 </div>

I have no idea how to implement the "smallest" div to be 25% of the big, let alone make the "small" 75% of the big one.

Also the height really confuses me, I need them to always have the same height.

Upvotes: 1

Views: 57

Answers (1)

kukkuz
kukkuz

Reputation: 42352

With flexbox you can wrap the small and the smallest into a separate div and use column flexbox on the left section.

I have no idea how to implement the "smallest" div to be 25% of the big

25% to 75% ratio means 1:3 ratio - and in flexbox language that is flex: 1 to the small element and flex: 3 to the big element.

Also the height really confuses me, I need them to always have the same height.

You can set the height of the container to the container element - your flexbox will fill to this height.

See demo below:

.container {
  display: flex;
  height: 70vh;
}

.big {
  flex: 3;
  background: gray;
  margin-left: 5px;
}

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

.left .small {
  background: gray;
  flex: 3;
}

.left .smallest {
  margin-top: 5px;
  background: gray;
  flex: 1;
}
<div class="container">
  <div class="left">
    <div class="small">
    </div>
    <div class="smallest">
    </div>
  </div>
  <div class="big">
  </div>
</div>

Upvotes: 4

Related Questions