在flex[副本]中将div的内容向右对齐

Question

我尝试使用float:right样式将Add to librarydiv向右对齐，但似乎不起作用。如何将div对齐到Flex右侧。谁能帮忙吗？

null

.song {
  display: flex;
  flex-direction: row;
  border: 1px solid red;
  padding: 10px
}

.song-name {
  padding: 10px;
  display: flex;
  align-items: center;
}

.song-action {
  padding: 10px;
  display: flex;
  align-items: center;
  color: red;
}

<div class="song">
  <div class="album-cover">
    <img src="https://gravatar.com/avatar/dba6bae8c566f9d4041fb9cd9ada7741?d=identicon&f=y" />

  </div>
  <div class="song-name">
    Song name
  </div>
  <div class="song-action">
    Add to library
  </div>
</div>

null

Answer 1

只需在添加到库div中添加margin-left:auto即可

null

css prettyprint-override">.song {
  display: flex;
  flex-direction: row;
  border: 1px solid red;
  padding: 10px
}

.song-name {
  padding: 10px;
  display: flex;
  align-items: center;
}

.song-action {
  padding: 10px;
  display: flex;
  align-items: center;
  margin-left: auto;
  color: red;
}

<div class="song">
  <div class="album-cover">
    <img src="https://gravatar.com/avatar/dba6bae8c566f9d4041fb9cd9ada7741?d=identicon&f=y" />

  </div>
  <div class="song-name">
    Song name
  </div>
  <div class="song-action">
    Add to library
  </div>
</div>

Answer 2

只需在要推到边上的元素上使用margin-left：auto即可。在flex容器中，任何一侧带有自动边距的东西都将把它推到最远的另一侧。

null

.song {
  display: flex;
  flex-direction: row;
  align-items: center;
  border: 1px solid red;
  padding: 10px
}

.song-name {
  padding: 10px;
  display: flex;
  align-items: center;
}

.song-action {
  padding: 10px;
  margin-left: auto;
  color: red;
}

<div class="song">
  <div class="album-cover">
    <img src="https://gravatar.com/avatar/dba6bae8c566f9d4041fb9cd9ada7741?d=identicon&f=y" />

  </div>
  <div class="song-name">
    Song name
  </div>
  <div class="song-action">
    Add to library
  </div>
</div>