无法在 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'>

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

}