html - 在 flex 中将 div 的内容右对齐

Question

<分区>

Answer 1

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

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