在flex中将div的内容向右对齐[重复]

Posted 2023-03-05

【中文标题】在flex中将div的内容向右对齐[重复]

【英文标题】：Align the content of the div to the right in a flex [duplicate]

【发布时间】：2020-11-06 21:03:32

【问题描述】：

我尝试将 添加到库 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>

【问题讨论】：

使用justify-content: flex-end;。确保您没有将flex-direction 更改为列。如果你有，那么你应该使用align-items: flex-end。

他只希望一项右对齐。不是整个菜单@SachinSingh

@seesharper 在这种情况下，他还可以在目标元素上使用align-self 属性，或margin: auto，如下面的答案中所述。感谢您指出。

你想右对齐什么？文字还是图片？

【参考方案1】：

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

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

【参考方案2】：

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