将flex中的div向右对齐

Question

如何将专辑封面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>

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

Answer 2

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

Answer 3

• 我向音乐控件添加了一个新类，并添加了2的flex-grow值和flex-start的align-self值
• 则对于.image，我将flex-end的align-self值相加
• 最后，我从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>