无法在 Flexbox 项目后添加新行换行符

Question

我正在尝试在弹性项目之间插入换行符，如本答案所示，使用：

.line-break {
  width: 100%;
}

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

最后一个弹性项目之后的元素。然而它不起作用：

当我试图让它看起来像这样：

我有这个代码：

.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代码中，则可以按照您的意愿工作。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'>&nbsp; &nbsp; <div class='date'>Aug 14, 2016</div>&nbsp; &nbsp; <div class="circle">&nbsp; &nbsp; &nbsp; &nbsp; <img class="menu-logo" width = 150 src=&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; '${pageContext.request.contextPath}/resources/img/autoparts_logo10.png'/>&nbsp; &nbsp; </div>&nbsp; &nbsp; <div class="line-break"></div>&nbsp; &nbsp; <div class='new-div'>&nbsp; &nbsp; <div class='links'>&nbsp; &nbsp; &nbsp; &nbsp; <div class = "login button" style = "cursor: pointer" onclick = "location.href = '/showLoginPage'">Login</div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<div class = "logout button" style = "cursor: pointer" onclick = "location.href = '/logout'">Logout</div>&nbsp; &nbsp; </div>&nbsp; &nbsp; <div class = "user-info">&nbsp; &nbsp; &nbsp; &nbsp; <span class = "balance">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; Balance: $100&nbsp; &nbsp; &nbsp; &nbsp; </span>&nbsp; &nbsp; &nbsp; &nbsp; <span class = "busket">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; Busket: $0&nbsp; &nbsp; &nbsp; &nbsp; </span>&nbsp; &nbsp; </div></div>&nbsp; &nbsp; </div>在你的 CSS 中：.links {border: 1px solid black;}.links .button&nbsp; {&nbsp; &nbsp; border: 1px solid white;&nbsp; &nbsp; padding: 6px;&nbsp; &nbsp; text-align: center;&nbsp; &nbsp; margin: 20px;}.line-break {&nbsp; &nbsp; display: flex;}.menu-container {&nbsp; &nbsp; color: #fff;&nbsp; &nbsp; padding: 20px 0;&nbsp; &nbsp; display: flex;&nbsp; &nbsp; justify-content: space-between;&nbsp; &nbsp; align-content: space-between;&nbsp; &nbsp; flex: 1 0 auto;&nbsp; &nbsp; background-color: red;&nbsp; &nbsp; width: 100%;&nbsp; &nbsp; flex-flow: row wrap;}.menu {&nbsp; &nbsp; width: 900px;&nbsp; &nbsp; display: flex;&nbsp; &nbsp; justify-content: space-between;&nbsp; &nbsp; align-items: center;}.links {&nbsp; &nbsp; display: flex;&nbsp; &nbsp; justify-content: space-around;&nbsp; &nbsp; &nbsp;border:1px solid black;}