在flex中将div的内容向右对齐

debugcn 发表于 Dev

写

我试图将“添加到”库 div的float: right样式与右侧对齐，但它似乎不起作用。如何将其对齐div到flex的右边。谁能帮忙吗？

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

杰斯

只需在要推到一侧的元素上使用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>

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。