2

I tried to align the Add to library div to the right with float: right style but it does not seem to work. How to align that div to the right of the flex. Could anyone please help?

.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>
scriobh
  • 868
  • 10
  • 25
  • Use ``justify-content: flex-end;``. Make sure you have not change the ``flex-direction`` to column. If you have then you should use ``align-items: flex-end``. – Sachin Singh Jul 17 '20 at 05:18
  • He just wants the one item right aligned. Not the whole menu @SachinSingh – see sharper Jul 17 '20 at 05:21
  • @seesharper In that case he can also use ``align-self`` property on targeted element, or ``margin: auto`` as mentioned in the answers below. Thanks for pointing it out. – Sachin Singh Jul 17 '20 at 05:23
  • what do you want to align to right? text or image? – CodeBug Jul 17 '20 at 05:28

2 Answers2

4

Just use margin-left: auto on the element you want shoved to the side. Inside a flex container anything with an auto margin on any side will push it to the farthest opposite side.

.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>
JHeth
  • 7,067
  • 2
  • 23
  • 34
4

just add margin-left:auto in your add to library div

.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>
Fareed Khan
  • 2,613
  • 1
  • 11
  • 19