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

Question

This question already has answers here:
Force flex item to span full row width
(2 answers)
Closed 5 years ago.
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).

Answer 2

Please check you can try this
<div class="wrap">
<div class="one"></div>
<div class="two"></div>
<div class="three"></div>
<div class="four"></div>
</div>
CSS
.wrap {
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
}
.wrap > div{
border: 1px solid;
height: 200px;
}
.one {
flex: 0 1 200px;
}
.two {
flex: 1 1 auto;
}
.three {
flex: 0 1 200px;
}
.four {
flex: 100%;
}
link https://jsfiddle.net/JentiDabhi/eoat01zn/

Answer 3

this is simple:
To achieve this:
.wrapper{
display: flex;
flex-wrap: wrap;
flex-direction: row;
background: blue;
width: 100%;
}
.one, .two, .three{
width: 33%;
background:red;
}
.four{
width:100%;
background:pink;
}
<div class="wrapper">
<div class="one">
one
</div>
<div class="two">
two
</div>
<div class="three">
three
</div>
<div class="four">
four
</div>
</div>