Flex container with four divs, need three columns, second column with two rows

Question

For a section on a page, I am trying to display two rectangular divs stacked up between two square divs on either side as big as the height of the two stacked divs, inside these divs are img tags.

I am using this markup because on mobile I want to be able to have them on an un-wrapped flex row with an overflow: hidden parent so I can use a swipe code to translate the X-axis. I am having problems creating this layout for desktop with this markup using the flexbox (No grid, need to support IE11). Has anyone done this layout with this markup? Thanks.

user_8620333 · Answer

Assuming that this will be the main layout of your page you can try to set a fixed height and use column direction with flexbox:

.flex_container {
  height: 100vh; /*adjust this value like you want*/
  display: flex;
  flex-direction: column;
  flex-wrap:wrap;
}
.flex_child {
  background:purple;
  border:2px solid #fff;
  box-sizing:border-box;
  width:calc(100% / 3);
}
.square {
  flex:1 1 100%;
}
.rect {
  flex:1 1 47%;
}

body {
  margin: 0;
}

And in case you want a better browser support you can use float/inline-block by slightly adjust the classes making the 2 squares at the start:

.flex_container {
  height: 100vh; /*adjust this value like you want*/
}
.flex_child {
  background:purple;
  border:2px solid #fff;
  box-sizing:border-box;
  width:calc(100% / 3);
  height:100%;
}
.square:nth-child(1) {
  float:left;
}
.square:nth-child(2) {
  float:right;
}
.rect {
  display:inline-block;
  height:50%;
  vertical-align:top;
}

body {
  margin: 0;
}

In case you cannot also change the classes, use some negative margin to rectify the position of the last element:

.flex_container {
  height: 100vh; /*adjust this value like you want*/
}
.flex_child {
  background:purple;
  border:2px solid #fff;
  box-sizing:border-box;
  width:calc(100% / 3);
  height:100%;
}
.square:first-child {
  float:left;
}
.square:last-child {
  float:right;
  margin-top:-50vh;
}
.rect {
  display:inline-block;
  height:50%;
  vertical-align:top;
}

body {
  margin: 0;
}

user_4095444 · Answer

Making some major assumptions about your content, but you can use absolute positioning to align things. Essentially you can pull the middle two elements out of the document flow and mimic stacking through positioning.

In this case, when above 767px, the entire row is within the document flow. When below 767px, we re-position the inner two elements and set the container to justify-content: space-between to provide the visual space.

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.flex_container {
  position: relative;
  display: flex;
}

.flex_item {
  flex: 1;
  height: 120px;
  border: 1px solid orange;
  padding: 40px;
  background-color: red;
  text-align: center;
}

@media (max-width: 767px) {
  .flex_container {
    justify-content: space-between;
  }  

  .flex_item {
    padding: 20px;
  }
  
  .square {
    flex: 0 1 33%;
  }
  
  .rect {
    position: absolute;
    left: calc(100% / 3);
    width: calc(100% / 3);
    height: 50%;
  }
  .rect.three {
    top: 50%;
  }
}


  
    One
  
  
    Two
  
  
    Three
  
  
    Four

Again, be careful - this assumes you can control the height of the container and the dimensions of the content within. If not, this type of layout falls apart fairly easily. As stated in the other comments, if you want more structure and stability, it'd be better to wrap the inner elements with another flex element with flex-direction: column. Just know the risks!

user_3228302 · Answer

Try

   .flex_container{
      display:flex;
      flex-direction: row;
      border: 1px solid red;

    }
    .flex_container2{
      display:flex;
      flex-direction:column;
      border: 1px solid green;
    }  
    .flex-child{
      border: 1px solid blue;
     }

I think you need a second flex-container.

user_6538712 · Answer

If you add a second container to control the two rect it gets easier. You can control the height and width of square to make them square, instead of dynamic width.

.flex-container {
   display: flex;
   height: 150px;
}
.container>*, .square {
  background-color: purple;
}

.flex-child {
    flex:1;
    display: inline-flex;
    margin: 2px
}

.square { flex-basis: 25%; }
.container {
    flex-direction: row;
    flex-basis: 50%
}
.container > * { 
  flex-basis: 50%; 
}
.container div:first-child {
 margin-right: 4px 
}

@media (max-width: 767px) {
  .container {
      flex-direction: column;
      flex-basis: 33.333%
  }
  .container div:first-child{
      margin: 0 0 4px 0
   } 
}

Or: (click in full page to see changing)

.flex-container {
   display: flex;
   height: 150px;
}
.container>*, .square {
  background-color: purple;
}

.flex-child {
    flex:1;
    display: inline-flex;
    margin: 2px
}

.square { flex-basis: 25%; }
.container {
    flex-direction: column;
    flex-basis: 33.333%
}
.container > * { 
  flex-basis: 50%; 
}
.container div:first-child {
 margin: 0 0 4px 0
}

@media (max-width: 767px) {
 .square, .container>* {
     height: 100px;
    }
 .flex-container {
     height: auto;
     flex-direction: column; 
    }
   .rect {
      flex-direction: column;
      flex-basis: 50%
   }
   
}

Flex container with four divs, need three columns, second column with two rows

4 Answers