将div在flex内部向右对齐[副本]

Question

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

null

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

null

Answer 1

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

祝你好运！

null

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

Answer 2

Flex有两个主轴，如果要将专辑封面在主轴中向右对齐，则需要使用属性justify-content:space-between；，该属性将扩展您的音乐控件和专辑封面，使用space-betweenittem均匀地分布在行中；第一个项目在开始行，最后一个项目在结束行，您可以在这里查看关于flex的更多信息

Answer 3

您可以将justify-content：space-between；添加到卡的CSS：

null

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