Flexbox make two divs on left and third on right

Question

I am using flexbox to align divs, and I want to make both postavatar and userinfo in left side and posttime to be in the right.

.postheader {
  display: flex;
  justify-content: space-between;
}

.postheader .postavatar img {
  width: 90px;
}

.postheader .userinfo {
  margin-top: 10px;
  margin-left: 20px;
}

.postheader .userinfo .postusername {
  color: #b3b3b3;
}

.postheader .posttime {
  color: #b3b3b3;
}

<div class="postheader">
  <div class="postavatar"><img src="images/avatar01.png" alt="User Image"></div>
  <div class="userinfo">
    <div class="postfullname">Fahad Aldaferi</div>
    <div class="postusername">@Q8Xbox</div>
  </div>
  <div class="posttime">24 m</div>
</div>

score 9 · Accepted Answer · answered Jan 24 '18 at 15:12

You can simply remove justify-content: space-between; from the flex container, and add margin-left: auto; on last flex item.

.postheader {
  display: flex;
  /*justify-content: space-between;*/
}

.postheader .postavatar img {
  width: 90px;
}

.postheader .userinfo {
  margin-top: 10px;
  margin-left: 20px;
}

.postheader .userinfo .postusername {
  color: #b3b3b3;
}

.postheader .posttime {
  color: #b3b3b3;
  margin-left: auto; /*new*/
}

<div class="postheader">
  <div class="postavatar"><img src="images/avatar01.png" alt="User Image"></div>
  <div class="userinfo">
    <div class="postfullname">Fahad Aldaferi</div>
    <div class="postusername">@Q8Xbox</div>
  </div>
  <div class="posttime">24 m</div>
</div>

chriskirknielsen · Answer 2 · 2018-01-24T21:34:26.087

1

You can simply add margin-left: auto; on your .posttime, which will move the elements where you want them.

edited Jan 24 '18 at 21:34

answered Jan 24 '18 at 15:13

chriskirknielsen

2,839
2
14
24

score 0 · Answer 3 · answered Jan 24 '18 at 15:11

One option: instead of justify-content:space-between;, use justify-content:flex-start;; Then, on the time, use flex-grow:1; and text-align:right;

.postheader {
    display: flex;
    justify-content: flex-start;
    width:100%;
}

.postheader .postavatar img{
    width: 90px;
}

.postheader .userinfo {
    margin-top: 10px;
    margin-left:20px;
}

.postheader .userinfo .postusername {
    color: #b3b3b3;
}

.postheader .posttime {
    color: #b3b3b3;
    flex-grow:1;
    text-align:right;
}

<div class="postheader">
        <div class="postavatar"><img src="images/avatar01.png" alt="User Image"></div>
        <div class="userinfo">
          <div class="postfullname">Fahad Aldaferi</div>
          <div class="postusername">@Q8Xbox</div>
        </div>
        <div class="posttime">24 m</div>
      </div>

score 0 · Answer 4 · answered Jan 24 '18 at 15:11

0

Put

<div class="postavatar"><img src="images/avatar01.png" alt="User Image"></div>

inside

<div class="userinfo">

answered Jan 24 '18 at 15:11

Tobias

229
1
2
13

score -1 · Answer 5 · answered Jan 24 '18 at 15:12

No need to overcomplicate, just have everything you want on the left in its own div. Therefore, the flexbox will space that div (.header-left) and post-time apart from each other. You can of course use your own flexbox or other styles within .header-left to align those elements.

.postheader {
    display: flex;
    justify-content: space-between;
}

.postheader .postavatar img{
    width: 90px;
}

.postheader .userinfo {
    margin-top: 10px;
    margin-left:20px;
}

.postheader .userinfo .postusername {
    color: #b3b3b3;
}

.postheader .posttime {
    color: #b3b3b3;
}

<div class="postheader">
  <div class="header-left">
    <div class="postavatar"><img src="images/avatar01.png" alt="User Image"></div>
    <div class="userinfo">
      <div class="postfullname">Fahad Aldaferi</div>
      <div class="postusername">@Q8Xbox</div>
    </div>
  </div>
  <div class="posttime">24 m</div>
</div>

Flexbox make two divs on left and third on right

5 Answers5

Linked