1

How do I align the album cover div to the right inside the card. I tried with align-self: end property but that does not seem to work. Could anyone please help?

.card {
  border: 1px red solid;
  width: 450px;
  height: 150px;
  border-radius: 5px;
  display: flex;
  flex-direction: row;
}

.image {
  width: 150px;
  height: 150px;
  align-self: end;
  border: 1px solid green;
}
<div class="card">
  <div>
    <div>Music controls</div>
  </div>
  <div class="image">Album Cover</div>
</div>
coderpc
  • 4,119
  • 6
  • 51
  • 93

3 Answers3

2

You can add justify-content: space-between; to your card's css:

.card {
  border: 1px red solid;
  width: 450px;
  height: 150px;
  border-radius: 5px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

.image {
  width: 150px;
  height: 150px;
  align-self: end;
  border: 1px solid green;
  float: right;
}
<div class="card">
  <div>
    <div>Music controls</div>
  </div>
  <div class="image">Album Cover</div>
</div>
CYr
  • 349
  • 4
  • 17
1

Flex has two main axis, if you want to align the album cover to the right in the main axis, you need to use the property justify-content: space-between; that will expand your music controls and album cover, with space-between ittems are evenly distributed in the line; first item is on the start line, last item on the end line, you can check more about flex here

F-nixro
  • 124
  • 4
1
  • I added a new class to the music controls and added a flex-grow value of 2 and align-self value of flex-start.
  • then for .image, i added align-self value of flex-end
  • at the end, i removed the hard-coded width/ height from image

Good luck!

.card {
  display: flex;
  flex-direction: row;
  background-color: #005792;
  width: 450px;
  height: 150px;
  border-radius: 5px;
  overflow: hidden;  
}

.music-controls{
  display: flex;
  flex-grow: 2;
}

.image {
  display: flex;
  flex-grow: 1;
  background-color: #fd5f00;
}
<div class="card">
  <div class="music-controls">
    <div>Music controls</div>
  </div>
  <div class="image">Album Cover</div>
</div>
kishanW
  • 49
  • 4