Flexbox - Align 2 items in a row and third item next row full width

Question

I am three items in a row. I want to keep first two items 50% 50% of the row and push the next third item to the next row and cover the 100% of the row.

 .container {
      display: flex;
      flex-wrap: nowrap;
      justify-content: space-between;
}

.div1, .div2 {
  flex: 0 0 50%;
}
.div3{ 
  flex: 1;
}

html markup

<div class="container">
  <div class="div1"></div>
  <div class="div2"></div>
  <div class="div3"></div>
</div>

What I want is first two elements lined together in one row and third element pushed to next row covering 100%;

you also don't need space-between since there is no room to space — Temani Afif, May 02 '18 at 13:44

patelarpan · Accepted Answer · 2019-04-19T09:08:06.643

5

you can do this.

.container {
      display: flex;
      flex-wrap: wrap;
}

.container div {
 height: 20px;
 
}

.div1, .div2 {
  flex: 0 0 50%;
}
div.div3{ 
  flex: 0 0 100%;
  
}

div.div1 {
 background-color:green;
}

div.div2 {
 background-color: yellow;
}

div.div3 {
 background-color: red;
}

<div class="container">
  <div class="div1"></div>
  <div class="div2"></div>
  <div class="div3"></div>
</div>

edited Apr 19 '19 at 09:08

answered May 02 '18 at 13:44

patelarpan

7,188
2
20
25

Explanation would be nice. It's worth pointing out that all you did/need to do is set `flex-wrap: wrap` instead of `nowrap` and set `flex: 0 0 100%` on `.div3` – Adam Jenkins May 02 '18 at 13:56
here I am using shorthand for `flex: 0 0 100%;` first 0 for `flex-grow`, second for `flex-shrink` and last for setting `flex-basis` setting into 100%; – patelarpan May 02 '18 at 14:00
hope that help you @Adam – patelarpan May 02 '18 at 14:00
using `flex-wrap: wrap` so flex item wrapped onto multiple lines. it's important for situation like this – patelarpan May 02 '18 at 14:02
welcome @MontyGoldy :) – patelarpan May 02 '18 at 15:41
@Adam its funny, i was just thinking - finally, not a long read. This is how it works.. simple example, thank you bye. ;) – Sagive Apr 18 '19 at 23:01
Why is setting the `flex-grow` and `flex-shrink` properties within `flex` important here? It seems to work with only setting `flex-basis` to `50%` and `100%` for the items. – 1252748 Feb 20 '20 at 18:10

score 0 · Answer 2 · answered May 02 '18 at 13:53

...

.container {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}

.div1, .div2 {
width: 50%;
}
.div3{ 
width: 100%;
}

<div class="container">
    <div class="div1"></div>
    <div class="div2"></div>
    <div class="div3"></div>
</div>

Flexbox - Align 2 items in a row and third item next row full width

2 Answers2