First-child and second in Flexbox

Issue

How can I set the first-child of flexbox in 80% width, the second div in 20%, and the second row, full-width in Flexbox?

Like this:

Solution

Following way you can achieve above layout using flexbox

First you need to create one parent div which have 3 children

<div class="row">
  <div class="child child1">80%</div>
  <div class="child child2">20%</div>
  <div class="w-100">full Row</div>
</div>

Then we are going to provide css to layout our elements, so we will give flex and flex-wrap propertied to parent div.row, when we set flex-wrap property to wrap it will place child div to new row when there is no space available which child exactly required

Here is the css that will place our elements

 .row {
    display: flex;
    flex-wrap: wrap;
  }
  .child1 {
    flex: 0 0 80%;
  }
  .child2 {
    flex: 0 0 20%;
  }
  .w-100 {
    flex: 0 0 100%;
    background: yellow;
  }

Here we are using css flex property to define width of the child element, here is the overview of flex property

CodeSandbox

Answered By - Prashant Shah