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