我正在尝试将timeAgo
即22 seconds ago
内容放在info
内容的正下方。但是,对于我使用的样式,timeAgo
正朝着正确的方向发展。
这是我的标记 -
.container {
overflow:auto;
}
.post {
height:120px;
width:700px;
margin:120px auto;
background-color:#EFEFEF;
border:1px solid #79CEF4;
display:flex;
justify-content:flex-start;
}
.photo {
width:80px;
height:80px;
background-color:#99E058;
margin:10px 10px 10px 20px;
align-self:center;
}
.info {
margin: 25px 10px 10px 20px;
align-self:center;
}
.timeAgo {
margin: 80px 10px 10px 20px;
font-size:11px;
}

<div class="container">
<div class="post">
<div class="photo"></div>
<div class="info"><p>This is just a plain simple message!</p></div>
<div class="timeAgo">22 seconds ago</div>
</div>
</div>
&#13;
答案 0 :(得分:28)
这是一个更简单的答案。使用flex-direction: column;
!
.post {
height:120px;
width:700px;
margin:120px auto;
background-color:#EFEFEF;
border:1px solid #79CEF4;
display:flex;
justify-content:flex-start;
flex-direction: column; /*This solves everything*/
}
答案 1 :(得分:4)
最简单的方法是调整HTML。
.post {
height: 120px;
width: 700px;
margin: 20px auto;
background-color: #EFEFEF;
border: 1px solid #79CEF4;
display: flex;
align-content: center;
justify-content: flex-start;
}
.imgwrap {
text-align: center;
}
.photo {
width: 80px;
height: 80px;
background-color: #99E058;
margin: 10px 10px 10px 20px;
}
.info {
margin: 25px 10px 10px 20px;
}
.timeAgo {
font-size: 11px;
}
&#13;
<div class="post">
<div class="imgwrap">
<div class="photo"></div>
<div class="timeAgo">22 seconds ago</div>
</div>
<div class="info">
<p>This is just a plain simple message!</p>
</div>
</div>
&#13;
但是......如果你不能这样做,你必须允许flex-container包装并使timeAgo
div被强制转到第二行&# #39;
一种方式:
.post {
height: 120px;
width: 700px;
margin: 20px auto;
background-color: #EFEFEF;
border: 1px solid #79CEF4;
display: flex;
align-content: center;
flex-wrap: wrap;
}
.photo {
flex: 0 0 80px;
height: 80px;
background-color: #99E058;
margin: 10px 10px 0px 10px;
}
.info {
flex: 1;
display: flex;
align-self: center;
}
.timeAgo {
flex: 0 0 100%;
font-size: 11px;
margin: 10px;
}
&#13;
<div class="post">
<div class="photo"></div>
<div class="info">
<p>This is just a plain simple message!</p>
</div>
<div class="timeAgo">22 seconds ago</div>
</div>
&#13;
答案 2 :(得分:0)
用途:
flex-wrap: wrap
在 parent div
和 flex: 1
在 child div
答案 3 :(得分:-1)
它不是理想的解决方案,但仍然;
.timeAgo {
margin: 80px 10px 10px -260px;
font-size:11px;
}