Невозможно добавить новые переносы строк после элементов flexbox

Question

Я пытаюсь вставить разрывы строк между гибкими элементами, как показано в этом ответе, используя:

.line-break {
  width: 100%;
}

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

Элемент после последнего элемента flex. Однако это не работает:

Пока я пытаюсь сделать так, чтобы это выглядело так:

У меня есть этот код:

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

Answer 1

если вы добавите flex-flow: wrap к .menu, ваш код будет работать так же, как и вы sh. Сравните вашу структуру кода с этим ответом: { ссылка }

hr, в данном случае это ваш line-break класс.

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

Вам нужно только выровнять по правому краю последний блок :)

Answer 2

Попробуйте это в вашем 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>

И это в вашем 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;
}