Using flex i need to create a horizontal div and underneath div in vertical

Question

Using Flex how can i create a layout , that has main parent div (container , display:flex) set. The div1 to be in horizontal div 2 and div 3 to be vertical as seen in the image. I am new to flex and still learning

Answer 1

You can Achieve this even without flex, But if you need to do all the 3 div with flex then you can use this. Here we put all the div in one contaner called main. And then we use flex property to make it a row. and then use flex-wrap to break apart. and then we give 100% to the first div as you wanted that in full width

HTML

<div id="main">
  <div style="background-color:coral;" id="one">RED</div>
  <div style="background-color:lightblue;">BLUE</div>  
  <div style="background-color:lightgreen;">Green div with more content.</div>
</div>

CSS

#main {
  width: 100%;
  height: 300px;
  border: 1px solid black;
  display: flex;
  flex-wrap:wrap;
}

div{
  width:200px;
}

#one{
  flex:100%;
}

Answer 2

You can do something like this:

#MainDiv {
  border: 1px solid black;
  display: flex;
  flex-direction: column;
  height: 500px;
  width: 700px;
}

.Column {
  border: 1px solid red;
  height: 30px;
  margin: 10px;
}

.Rows {
  display: flex;
  flex-direction: row;
  height: 450px;
  width: 650px;
  border: 1px solid teal;
  margin: 10px;
}

.row {
  height: 400px;
  width: 300px;
  border: 1px solid red;
  margin: 10px;
}

<div id="MainDiv">
  <div class="Column">Horizontal  </div>
  <div class="Rows">
    <div class="row">Vertical Left</div>
    <div class="row">Vertical Right</div>
  </div>
</div>

Answer 3

You can use flex: 1 without specifying size in pixel for each box

.row {
  display: flex;
  flex-direction: row;
  width: 100%;
}
.col {
  border: 1px solid red;
  flex: 1;
}

<div class="row">
  <div class="col">One</div>
</div>
<div class="row">
  <div class="col">Two</div>
  <div class="col">Three</div>
</div>