将flex内的div向右对齐[重复]答案

【问题标题】：Align div inside a flex to the right [duplicate]将flex内的div向右对齐[重复]
【发布时间】：2020-10-29 05:38:31
【问题描述】：

如何将专辑封面div 与卡片内的右侧对齐。我尝试使用 align-self: end 属性，但这似乎不起作用。有人可以帮忙吗？

.card {
  border: 1px red solid;
  width: 450px;
  height: 150px;
  border-radius: 5px;
  display: flex;
  flex-direction: row;
}

.image {
  width: 150px;
  height: 150px;
  align-self: end;
  border: 1px solid green;
}

<div class="card">
  <div>
    <div>Music controls</div>
  </div>
  <div class="image">Album Cover</div>
</div>

【问题讨论】：

标签： html css

【解决方案1】：

你可以将justify-content: space-between;添加到你卡片的css中：

.card {
  border: 1px red solid;
  width: 450px;
  height: 150px;
  border-radius: 5px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

.image {
  width: 150px;
  height: 150px;
  align-self: end;
  border: 1px solid green;
  float: right;
}

<div class="card">
  <div>
    <div>Music controls</div>
  </div>
  <div class="image">Album Cover</div>
</div>

【讨论】：

【解决方案2】：

Flex有两个主轴，如果你想把专辑封面在主轴的右边对齐，你需要使用属性justify-content: space-between;来扩展你的音乐控件和专辑封面，space-between的项目是均匀分布在线路上；第一项在开始行，最后一项在结束行，您可以查看更多关于flex here

【讨论】：

【解决方案3】：

我向音乐控件添加了一个新类，并添加了 flex-grow 值 2 和 align-self 值 flex-start。
然后对于.image，我添加了align-self 值flex-end
最后，我从image 中删除了硬编码的宽度/高度

祝你好运！

.card {
  display: flex;
  flex-direction: row;
  background-color: #005792;
  width: 450px;
  height: 150px;
  border-radius: 5px;
  overflow: hidden;  
}

.music-controls{
  display: flex;
  flex-grow: 2;
}

.image {
  display: flex;
  flex-grow: 1;
  background-color: #fd5f00;
}

<div class="card">
  <div class="music-controls">
    <div>Music controls</div>
  </div>
  <div class="image">Album Cover</div>
</div>

【讨论】：