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:

CodePudding user response：

Following way you can achieve above layout using flexbox

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

<div >
  <div >80%</div>
  <div >20%</div>
  <div >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

CodePudding user response：

The only tricky part is playing with margin and gaps, taking out the gap from the childs width

first child and last child are easy, the middle one Is

first-child div{} or nth-child(n){}

.flex-container {
  display: inline-flex;
  flex-wrap: wrap;
  width: 100%;
  gap: .5rem;
}

.flex-container > div {
  text-align: center;
  font-size: 3rem;
  background: blue;
  color: white;
  border-radius: 8px;
}

.flex-container div:first-child {
  flex: 0 0 calc(20% - .25rem);
}
.flex-container div:nth-child(2) {
  flex: 0 0 calc(80% - .25rem);
}
.flex-container div:last-child {
  flex: 0 0 100%;
}

<div class='flex-container'>
  <div>20%</div>
  <div>80%</div>
  <div>100%</div>
</div>