将 div 放在另一个下方（使用 flexbox）

Question

我正在尝试将 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>

Answer 1

最简单的做法是调整 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;
}

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

但是......如果你不能这样做，你将不得不允许弹性容器包装并使 timeAgo div 被迫到第二个 'row'.

一种方式：

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

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

Answer 2

这不是一个理想的解决方案，但仍然是；

.timeAgo {
    margin: 80px 10px 10px -260px;
    font-size:11px;
}

Answer 3

这是一个简单得多的答案。使用 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*/
}

Answer 4

使用：
flex-wrap: wrap 在 parent div 和 flex: 1 在 child div

将 div 放在另一个下方（使用 flexbox）

Placing a div below another (using flexbox)

html

css

flexbox