Maven Maverick Maven Maverick - 5 months ago 15
CSS Question

Placing a div below another (using flexbox)

I am trying to place the

timeAgo
i.e.
22 seconds ago
content just below the
info
content. But, for the styling I am using,
timeAgo
is being pushed towards right.


Here is my markup -



.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

The simplest thing to do is adjust the 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>

BUT...if you can't do that, you'll have to allow the flex-container to wrap and make the timeAgo div be forced to the second 'row'.

One way:

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

Comments