force last div on a new line with flexbox

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.

You could just use the html tag `
` to move it to the next line. — Geshode, Jan 12 '18 at 11:59

score 20 · Answer 1 · answered Jan 12 '18 at 12:03

20

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).

answered Jan 12 '18 at 12:03

delinear

2,745
1
10
21

damn, Thank you. – Happy Andrei Jan 12 '18 at 12:22
No problem, I'm glad it worked for you :) – delinear Jan 12 '18 at 12:28
1

@delinear why have you applied `display: flex` in `.two` and `.three` class? I don't think there is need of this – Bhuwan Jan 12 '18 at 12:53
@BhuwanBhatt I haven't applied them - those are OP's styles from the question, I just duplicated his code and added the additional styles to .wrap and .four. – delinear Jan 12 '18 at 13:33
@delinear but if you are giving an answer I think you have to remove the code which is not useful and inform the OP – Bhuwan Jan 12 '18 at 13:38
1

@Bhuwan Bhatt i used `display: flex` in .two because in .two i actualy have another 3 divs and they need to be in-line and for .three i use it because i had to apply `justify-content: flex-end;` – Happy Andrei Jan 12 '18 at 13:47
@BhuwanBhatt OP had a very specific question, which I answered to his satisfaction. I assumed anything not related to his question was there for a reason and the solution should work _alongside_ the existing code (which OP has confirmed to be the case). – delinear Jan 12 '18 at 13:59

score 0 · Answer 2 · answered Jan 12 '18 at 12:08

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/

score 0 · Answer 3 · answered Jan 12 '18 at 12:12

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>

force last div on a new line with flexbox

3 Answers3