Flexbox 在左侧和右侧创建两个 div [重复]答案

【问题标题】：Flexbox make two divs on left and third on right [duplicate]Flexbox 在左侧和右侧创建两个 div [重复]
【发布时间】：2018-07-03 16:29:41
【问题描述】：

我正在使用 flexbox 来对齐 div，我想让 postavatar 和 userinfo 在左侧，posttime 在右侧。

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

【问题讨论】：

标签： html css flexbox

【解决方案1】：

您只需在您的.posttime 上添加margin-left: auto;，这会将元素移动到您想要的位置。

【讨论】：

【解决方案2】：

您可以简单地从弹性容器中删除justify-content: space-between;，然后在最后一个弹性项目上添加margin-left: auto;。

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

【讨论】：

【解决方案3】：

无需过于复杂，只需将左侧所需的所有内容放在自己的 div 中即可。因此，flexbox 会将 div (.header-left) 和 post-time 分开。您当然可以使用自己的 flexbox 或 .header-left 中的其他样式来对齐这些元素。

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

【讨论】：

【解决方案4】：

放

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

里面

<div class="userinfo">

【讨论】：

【解决方案5】：

一个选项：代替justify-content:space-between;，使用justify-content:flex-start;；然后，在时间上，使用flex-grow:1;和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>

【讨论】：