0

I'm trying to achieve the flex layout as per the image below. In my code examples, I've not been successful, yet so I can't provide any useful code snippets.

  • Box 1 would be fixed width and 100% height
  • Box 2 and 3 would be 50% height and 100% width
  • Box 4 would be fixed width and 100% height

It would be wrapped in a container DIV (not shown).

Is this correct usage for Flex, or should a grid be used for something like this? I've found an example that manages to get either box 1 or box 4 in position (such as here: Mozilla Flex Example, but not with both.

enter image description here

James
  • 737
  • 2
  • 11
  • 27

2 Answers2

2

For layouts with such requirements CSS Grid is a much better choice than Flexbox.

CSS Grid Layout excels at dividing a page into major regions or defining the relationship in terms of size, position, and layer, between parts of a control built from HTML primitives.

Here's a working codepen. You can modify the fixed columns width by changing the grid-template-columns definitions.

NevNein
  • 487
  • 4
  • 14
  • Appreciate the recommendation. I haven't actually used CSS Grid before but will take a look at how it works. – James Feb 27 '20 at 17:29
0

Yes, you can do this with flexbox - you will need a container div for box 2 and box 3. You can use something like this:

#layout {
  display: flex;
  resize: both;
  overflow: scroll;
}

#box1, #box4 {
  width: 100px;
}

#box2-3 {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
}

#box2, #box3 {
  flex-grow: 1;
}

#box1, #box2, #box3, #box4 {
  border: 1px solid red;
}
<div id="layout">
  <div id="box1">Box 1</div>
  <div id="box2-3">
    <div id="box2">Box 2</div>
    <div id="box3">Box 3</div>
  </div>
  <div id="box4">Box 4</div>
</div>
Maximouse
  • 4,170
  • 1
  • 14
  • 28