Question 216971 in Html Question posted in
Some basic documentation can be found here.

Html – Aligning li elements on top of eacher and side by side using flexbox

It is hard to explain what i exactly want so i’ll post some images.

image
So i want the tracks to get align side by side vertically when they pass the album covers height.

li elements are dynamically generated by the js code. I created an array of objects and it passes the tracks.

Here’s my html and css code. Thanks in advance im going crazy over this and it seems something so easy to do.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./style.css">
    <link rel="stylesheet" href="">
    <title>What</title>
</head>
<body>
    <main>
        <div class="album-container">
            <img src="" class="cover">
            <div class="album-info">
                <div class="title-info">
                    <h2 class="title">Title</h2>
                    <h3 class="artist">Playboi Carti</h3>
                    <span class="year">Year</span>
                </div>
                <ul class="tracks">
                    <!--
                    li tags gon be dynamically created by script
                    -->
                </ul>
            </div>
        </div>
        <button class="btnChange">Look</button>
    </main>
    <script src="./app.js"></script>
</body>
</html>

@import url('https://fonts.googleapis.com/css2?family=M+PLUS+Rounded+1c&display=swap');

img{
    max-width: 400px;
    max-height: 400px;
}


*{
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    text-decoration: none;
    list-style-type: none;
    font-family: 'M PLUS Rounded 1c', sans-serif;
    overflow: hidden;
}

body{
    background-color: #0a0908;
    color: white;
    height: 100vh;
}


main{   
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

ul{
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    max-height: 400px;
}

li{
    padding: 5px;
}

.album-container{
    margin-bottom: 20px;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;

}

.album-info{
    margin-left: 20px;
    flex: 1;
}


.btnChange{
    clear: both;
}
Tags:

2

Answers


  1. 0

    This is actually not an easy problem to solve.

    My suggestion would be to use a grid for the overall layout, then for the track list use an absolutely positioned nested flexbox with the following styles:

    • flex-direction: column
    • flex-wrap: wrap
    • align-content: start

    The absolute positioning is necessary in order to have the height of the second column be determined by the height of the image in the first column, rather than the contents of the <ul>.

    Here is a snippet to demonstrate:

    document.querySelectorAll('.tracklist>ul').forEach(ul => {
  // get 30 random words from this API - https://random-word-api.herokuapp.com/home
  fetch('https://random-word-api.herokuapp.com/word?number=30')
  .then(response => response.json())
  .then(data => {
    // wrap each word in an <li> tag and replace contents of <ul>
    ul.innerHTML = data.map(a => `<li>${a}</li>`).join('')
  })
})
    :root {
  --image-size: 200px;
}
body {
  margin: 1em;
}
.album {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 2em;
}
.album>img {
  width: var(--image-size);
}
.tracklist {
  position: relative;
}
.tracklist ul {
  position: absolute;
  left: 0;
  right: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  align-content: start;
  gap: 0 1em;
}
hr {margin: 1em 0};
    <div class="album">
  <img src="https://picsum.photos/id/34/400">
  <div class="tracklist">
    <ul></ul>
  </div>
</div>

<hr>

<div class="album">
  <img src="https://picsum.photos/id/64/400">
  <div class="tracklist">
    <ul></ul>
  </div>
</div>
    Login or Signup to reply.
  2. 0

    Use a two-column grid for the list of tracks. This is all I changed:

    ul {
    display: grid;
    grid-template-columns: 1fr 1fr;
    /* display: flex; */
    /* flex-direction: column; */
    /* flex-wrap: wrap; */
    /* max-height: 400px; */
}

    img{
    max-width: 400px;
    max-height: 400px;
}


*{
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    text-decoration: none;
    list-style-type: none;
    font-family: 'M PLUS Rounded 1c', sans-serif;
    overflow: hidden;
}

body{
    background-color: #0a0908;
    color: white;
    height: 100vh;
}


main{   
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

ul{
    display: grid;
    grid-template-columns: 1fr 1fr;
}

li{
    padding: 5px;
}

.album-container{
    margin-bottom: 20px;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;

}

.album-info{
    margin-left: 20px;
    flex: 1;
}


.btnChange{
    clear: both;
}
    <main>
    <div class="album-container">
        <img src="//picsum.photos/400" class="cover">
        <div class="album-info">
            <div class="title-info">
                <h2 class="title">Title</h2>
                <h3 class="artist">Playboi Carti</h3>
                <span class="year">Year</span>
            </div>
            <ul class="tracks">
              <li>acerbically</li>
              <li>exocytosis</li>
              <li>bathyscaphs</li>
              <li>helpless</li>
              <li>enates</li>
              <li>dopaminergic</li>
              <li>intruders</li>
              <li>rollway</li>
              <li>tamanduas</li>
              <li>butty</li>
              <li>allees</li>
              <li>atop</li>
              <li>plunkiest</li>
              <li>disloyalties</li>
              <li>covey</li>
              <li>daglock</li>
              <li>ensheath</li>
              <li>precooking</li>
              <li>copywriters</li>
              <li>reifications</li>
              <li>corporeities</li>
              <li>slabbering</li>
              <li>spiritualism</li>
              <li>hyperploidies</li>
              <li>pouting</li>
              <li>leukotic</li>
              <li>hydroxylation</li>
              <li>ells</li>
              <li>remailing</li>
              <li>bevomited</li>
            </ul>
        </div>
    </div>
    <button class="btnChange">Look</button>
</main>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search