提问者:小点点

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


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


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

匿名用户

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

匿名用户

  • 我向音乐控件添加了一个新类,并添加了2flex-grow值和align-selfflex-start值。
  • 然后,对于.image,我添加了align-selfflex-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>