Flexbox在左侧制作两个DIV，在右侧制作第三个DIV[副本]

Question

我正在使用flexbox对齐div，并且我想使PostAvatar和UserInfo都位于左侧，而PostTime位于右侧。

null

css prettyprint-override">.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>

null

Answer 1

一个选项：使用justify-content：space-between；而不是justify-content：flex-start；；然后，在时间上，使用flex-grow:1；和text-align:right；

null

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

html prettyprint-override"><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>

Answer 2

您可以简单地在.posttime上添加margin-left:auto；，这样可以将元素移动到您想要的位置。

Answer 3

您可以简单地从flex容器中删除justify-content：space-between；，并在最后一个flex项上添加margy-left:auto；。

null

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