force last div on a new line with flexbox [duplicate]

Question

I have this HTML

<div class="wrap">
     <div class="one"></div>
     <div class="two"></div>
     <div class="three"></div>
     <div class="four"></div>
</div> 

plus this CSS

.wrap {
    display: flex;
    align-items: center;
}

.one {
    flex: 0 1 200px;
}

.two {
    display: flex;
    flex: 1 1 auto;
    align-items: center;
    justify-content: center;
}

.three {
    display: flex;
    flex: 0 1 200px;
    justify-content: flex-end;
}

.four {
    ???
}

and i wanna make it look like this, i don't know what else to use for .four to make that last div to move on a new line plus 100% width

[- one -----][----- two -----][----- three -]
[----------------- four --------------------]

atm looks like this

[- one -----][----- two -----][----- three -] [- four -----]

i know i can use another

<div class="wrap">

but i don't want this, Thank you.

Answer 1

Add flex-wrap: wrap to the .wrap class, and make your .four class flex: 1 1 100%, that should do the trick:

.wrap {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}

.one {
    flex: 0 1 200px;
}

.two {
    display: flex;
    flex: 1 1 auto;
    align-items: center;
    justify-content: center;
}

.three {
    display: flex;
    flex: 0 1 200px;
    justify-content: flex-end;
}

.four {
   flex: 1 1 100%;
}

Here's a Codepen example (I added a border and height to your divs just to make it easier to visualise).