Can't add new lines linebreaks after flexbox items

Question

I'm trying to insert linebreaks between flex items like shown in this answer, using:

.line-break {
  width: 100%;
}

<div class="line-break"></div>

Element after the last flex item. However it doesn't work:

While I'm trying to make it look like this:

I have this code:

.links {
  display: flex;
  justify-content: flex-end;
  border: 1px solid black;
}

.links .button {
  border: 1px solid white;
  padding: 6px;
  text-align: center;
  margin: 20px;
}

.line-break {
  width: 100%;
}

.menu-container {
  color: #fff;
  padding: 20px 0;
  display: flex;
  justify-content: space-between;
  align-content: space-between;
  flex: 1 0 auto;
  background-color: red;
  width: 100%;
  flex-flow: row wrap;
}

.menu {
  width: 900px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.links {
  display: flex;
  justify-content: space-around;
  border: 1px solid black;
}

<div class='menu-container'>
  <div class='menu'>
    <div class='date'>Aug 14, 2016</div>

    <div class="circle">
      <img class="menu-logo" width=1 50 src='${pageContext.request.contextPath}/resources/img/autoparts_logo10.png' />
    </div>

    <div class='links'>
      <div class="login button" style="cursor: pointer" onclick="location.href = '/showLoginPage'">Login</div>
      <div class="logout button" style="cursor: pointer" onclick="location.href = '/logout'">Logout</div>
    </div>

    <div class="line-break"></div>

    <div class="user-info">
      <div class="balance">
        Balance: $100
      </div>

      <div class="busket">
        Busket: $0
      </div>
    </div>
  </div>
</div>

JSFiddle: https://jsfiddle.net/2zsq98hk/

J4R · Accepted Answer · 2020-03-15T20:58:16.220

if you add flex-flow: wrap to .menu your code works like you wish. Compare your code structure with this answer: https://stackoverflow.com/a/50381928/2720657

hr in this case is your line-break class.

.links {
    display: flex;
    justify-content: flex-end;
    border: 1px solid black;
}

.links .button  {
    border: 1px solid white;
    padding: 6px;
    text-align: center;
    margin: 20px;
}

.line-break {
    width: 100%;
}

.menu-container {
    color: #fff;
    padding: 20px 0;

    display: flex;
    justify-content: space-between;
    align-content: space-between;

    flex: 1 0 auto;
 
    background-color: red;

    width: 100%;
    flex-flow: row wrap;
}

.menu {
    width: 900px;

    display: flex;
    justify-content: space-between;

    align-items: center;
    flex-flow: wrap;
}
 

.links {
    display: flex;
    justify-content: space-around;
     border:1px solid black;
}

<div class='menu-container'>
    <div class='menu'>
        <div class='date'>Aug 14, 2016</div>

        <div class="circle">

            <img class="menu-logo" width = 150 src=
                    '${pageContext.request.contextPath}/resources/img/autoparts_logo10.png'/>
        </div>

        <div class='links'>

                <div class = "login button" style = "cursor: pointer"
                     onclick = "location.href = '/showLoginPage'">Login</div>
                 <div class = "logout button" style = "cursor: pointer"
                     onclick = "location.href = '/logout'">Logout</div>

        </div>

        <div class="line-break"></div>

        <div class = "user-info">
            <div class = "balance">
                Balance: $100
            </div>

            <div class = "busket">
                Busket: $0
            </div>
        </div>
    </div>
</div>

You only have to align right the last block :)

You could set the `.user-info` div to `display: flex; justify-content: flex-end; width: 100%;`, something like this. Haven‘t tasted it yet — J4R, Mar 16 '20 at 06:59

score 0 · Answer 2 · answered Mar 15 '20 at 19:43

Try this in your html.

<div class='menu-container'>
<div class='menu'>
    <div class='date'>Aug 14, 2016</div>

    <div class="circle">

        <img class="menu-logo" width = 150 src=
                '${pageContext.request.contextPath}/resources/img/autoparts_logo10.png'/>
    </div>

    <div class="line-break"></div>

    <div class='new-div'>
    <div class='links'>

        <div class = "login button" style = "cursor: pointer" onclick = "location.href = '/showLoginPage'">Login</div>
         <div class = "logout button" style = "cursor: pointer" onclick = "location.href = '/logout'">Logout</div>

    </div>

    <div class = "user-info">
        <span class = "balance">
            Balance: $100
        </span>

        <span class = "busket">
            Busket: $0
        </span>
    </div>
</div>

    </div>

And this in your css:

.links {
border: 1px solid black;
}

.links .button  {
    border: 1px solid white;
    padding: 6px;
    text-align: center;
    margin: 20px;
}

.line-break {
    display: flex;
}

.menu-container {
    color: #fff;
    padding: 20px 0;

    display: flex;
    justify-content: space-between;
    align-content: space-between;

    flex: 1 0 auto;

    background-color: red;

    width: 100%;
    flex-flow: row wrap;
}

.menu {
    width: 900px;

    display: flex;
    justify-content: space-between;

    align-items: center;
}


.links {
    display: flex;
    justify-content: space-around;
     border:1px solid black;
}

Can't add new lines linebreaks after flexbox items

2 Answers2