2

I have this three divs and i'm facing a problem. There's a way to position divs with flex layout down each other when having different heights?

My .div-1 and .div-3 have the same width, there's a way to put the .div-3 instantly down the .div-1?

This is my code:

.container {
      display: flex;
      flex-wrap: wrap;
}
.div1 {
      width: 80%;
      background-color: gray;
      height: 40px;
}
.div2 {
       width: 20%;
       background-color: indigo;
       height: 120px;
}
.div3 {
       width: 80%;
       background-color: red;
       display: grid;
       float: left;
}
<!DOCTYPE html>
<html>
  <body>
    <div class="container">
      <div class="div1">
        content div 1
      </div>

      <div class="div2">
        content div 2
      </div>

      <div class="div3">
        content div 3
      </div>
    </div>
  </body>
</html>

How i can do this?

veroneseComS
  • 653
  • 2
  • 14
  • 40
  • 1
    you could wrap div1 and div3 in another subcontainer and apply another flex display with a column flex-direction, then in the main container keep a flex display with a row direction and it should do what you want. – avia Sep 10 '20 at 03:29

1 Answers1

2

See here if that's what you want: https://codepen.io/larrytherabbit/pen/yLOKbaM

.container {
      display: flex;width:100%;
      flex-wrap: wrap;
}

.subcontainer {
  display:flex;flex-direction:column;width:80%;
}
.div1 {
      width: 100%;
      background-color: gray;
      height: 40px;
}
.div2 {
       width: 20%;
       background-color: indigo;
       height: 120px;
}
.div3 {
       width: 100%;
       background-color: red;
       display: grid;
       float: left;
}
<html>
  <body>
    <div class="container">
      <div class="subcontainer">
      <div class="div1">
        content div 1
      </div>

       <div class="div3">
        content div 3
      </div>
    </div>
      <div class="div2">
        content div 2
      </div>
    </div>
  </body>
</html>
avia
  • 1,527
  • 7
  • 19