Back to Examples
3:45
3:45
3:45
3:45
3:45
3:45
3:45
3:45
3:45
3:45
Music Player Layout
A modern music player interface using flexbox for responsive layout. Features a main player area, playlist, and fixed bottom controls. Demonstrates using flexbox for both vertical and horizontal alignment.
PREVIEW
Song Title
Artist Name
1:23
3:45
Playlist
Track 1
Artist Name
Track 2
Artist Name
Track 3
Artist Name
Track 4
Artist Name
Track 5
Artist Name
Track 6
Artist Name
Track 7
Artist Name
Track 8
Artist Name
Track 9
Artist Name
Track 10
Artist Name
Now Playing
Artist Name
CODE
/* Main Container */
.player-container {
display: flex;
flex-direction: column;
height: 100%;
}
/* Main Content Area */
.content-area {
flex-grow: 1;
display: flex;
flex-direction: column;
gap: 2rem;
}
@media (min-width: 768px) {
.content-area {
flex-direction: row;
}
}
/* Now Playing Section */
.now-playing {
display: flex;
flex-direction: column;
align-items: center;
width: 100%;
}
@media (min-width: 768px) {
.now-playing {
width: 50%;
}
}
/* Controls */
.player-controls {
display: flex;
align-items: center;
gap: 1.5rem;
}
/* Bottom Bar */
.bottom-controls {
display: flex;
align-items: center;
justify-content: space-between;
}
/* Playlist */
.playlist {
display: flex;
flex-direction: column;
width: 100%;
}
@media (min-width: 768px) {
.playlist {
width: 50%;
}
}