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

How do I make images in flexbox align? – Html

I’m building this website for a uni project and came across a problem. On my webpage I have a flexbox with movie flexboxes. Some movies have long title pushing the image down as you can see in this snippet:

class Movie {
  constructor(title, image, description, duration, release, age, schedule, seats) {
    this.title = title;
    this.image = image;
    this.description = description;
    this.duration = duration;
    this.release = release;
    this.age = age;
    this.schedule = schedule; //dictionary met alle tijden per dag.
    this.seats = seats;
  }
}

const blankMovie = new Movie(
  "Blank",
  "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAQwAAAC8CAMAAAC672BgAAAAA1BMVEWxrq37BefPAAAARklEQVR4nO3BAQEAAACAkP6v7ggKAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAoAbFjAAB3KzK6gAAAABJRU5ErkJggg==",
  "blank",
  "blank"
);

const longtitleMovie = Object.assign({}, blankMovie, { title: "Loooooooooooooong Title" })

var allMovies = [blankMovie, blankMovie, blankMovie, blankMovie, longtitleMovie, longtitleMovie, longtitleMovie];
const homePage = document.getElementById("movie-slider");

for (let i = 0; i < allMovies.length; i++) {
  const movieDiv = document.createElement("div");
  movieDiv.className = "movie-banner";

  const movieTitle = document.createElement("span");
  movieTitle.className = "movie-banner__title";
  movieTitle.textContent = allMovies[i].title;

  const movieImage = document.createElement("img");
  movieImage.className = "movie-banner__image";
  movieImage.src = allMovies[i].image;

  const movieDur = document.createElement("span");
  movieDur.className = "movie-banner__desc";
  movieDur.textContent = allMovies[i].duration;

  homePage.appendChild(movieDiv);
  movieDiv.appendChild(movieTitle);
  movieDiv.appendChild(movieImage);
  movieDiv.appendChild(movieDur);
}
body {
  margin: 0;
  font-family: 'Teko', sans-serif;
}

#movie-slider {
  display: flex;
  flex-direction: row;
  overflow: auto;
  gap: 10px;
  padding: 0% 10%;
}

#movie-slider::-webkit-scrollbar {
  height: 0;
}

.movie-banner {
  flex-basis: 250px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
}

.movie-banner__image {
  object-fit: cover;
  height: 100px;
}

.movie-banner__title {
  color: wheat;
  text-align: center;
  font-family: 'Bebas Neue', cursive;
  font-size: 2em;
  padding: 10px
}

.movie-banner__desc {
  color: wheat;
  font-size: 1.3em;
  text-align: center;
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Movie Tickets</title>
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Teko:wght@300&display=swap" rel="stylesheet">
  <link rel="stylesheet" href="/css/index.css">
  <link rel="stylesheet" href="/css/general.css">
  <!--<link rel="icon" href="../images/general/logo.jpg">-->
</head>

<body>
  <article class="content">
    <section id="movie-slider">
    </section>
  </article>
  <script src="/js/index.js" type="module"></script>
  <script src="/js/general.js" type="module"></script>
</body>

</html>

How do I change the snippet so that all images are aligned, and the titles are moved up if necessary? Thanks in advance!!

Tags:

2

Answers


  1. 0

    Add align-items: end; to your #movie-slider selector. This will vertically align all of the child .movie-banner items to the "end" or bottom of their container.

    A tip: I highly suggest this page for learning about Flexbox

    https://css-tricks.com/snippets/css/a-guide-to-flexbox/

    I’m still not as familiar with it as I want to be, and this is a great resource to keep open with developing.

    Login or Signup to reply.
  2. 0

    There are multiple solutions for that issue. I added a wrapper for the image and the text below it, put a justify-content: space-between on the .movie-banner and then it’s fine. Other option would be to limit the height of the title itself & truncate it.

    class Movie {
  constructor(title, image, description, duration, release, age, schedule, seats) {
    this.title = title;
    this.image = image;
    this.description = description;
    this.duration = duration;
    this.release = release;
    this.age = age;
    this.schedule = schedule; //dictionary met alle tijden per dag.
    this.seats = seats;
  }
}

const blankMovie = new Movie(
  "Blank",
  "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAQwAAAC8CAMAAAC672BgAAAAA1BMVEWxrq37BefPAAAARklEQVR4nO3BAQEAAACAkP6v7ggKAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAoAbFjAAB3KzK6gAAAABJRU5ErkJggg==",
  "blank",
  "blank"
);

const longtitleMovie = Object.assign({}, blankMovie, { title: "Loooooooooooooong Title" })

var allMovies = [blankMovie, blankMovie, blankMovie, blankMovie, longtitleMovie, longtitleMovie, longtitleMovie];
const homePage = document.getElementById("movie-slider");

for (let i = 0; i < allMovies.length; i++) {
  const movieDiv = document.createElement("div");
  movieDiv.className = "movie-banner";

  const movieTitle = document.createElement("span");
  movieTitle.className = "movie-banner__title";
  movieTitle.textContent = allMovies[i].title;

  const metaData = document.createElement("div");
  metaData.className = "movie-banner__meta";
  
  const movieImage = document.createElement("img");
  movieImage.className = "movie-banner__image";
  movieImage.src = allMovies[i].image;

  const movieDur = document.createElement("span");
  movieDur.className = "movie-banner__desc";
  movieDur.textContent = allMovies[i].duration;

  homePage.appendChild(movieDiv);
  movieDiv.appendChild(movieTitle);
  movieDiv.appendChild(metaData);
  metaData.appendChild(movieImage);
  metaData.appendChild(movieDur);
}
    body {
  margin: 0;
  font-family: 'Teko', sans-serif;
}

#movie-slider {
  display: flex;
  flex-direction: row;
  overflow: auto;
  gap: 10px;
  padding: 0% 10%;
}

#movie-slider::-webkit-scrollbar {
  height: 0;
}

.movie-banner {
  flex-basis: 250px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.movie-banner__meta {
  display: flex;
  flex-direction: column;
}

.movie-banner__image {
  object-fit: cover;
  height: 100px;
}

.movie-banner__title {
  color: wheat;
  text-align: center;
  font-family: 'Bebas Neue', cursive;
  font-size: 2em;
  padding: 10px
}

.movie-banner__desc {
  color: wheat;
  font-size: 1.3em;
  text-align: center;
}
    <!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Movie Tickets</title>
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Teko:wght@300&display=swap" rel="stylesheet">
  <link rel="stylesheet" href="/css/index.css">
  <link rel="stylesheet" href="/css/general.css">
  <!--<link rel="icon" href="../images/general/logo.jpg">-->
</head>

<body>
  <article class="content">
    <section id="movie-slider">
    </section>
  </article>
  <script src="/js/index.js" type="module"></script>
  <script src="/js/general.js" type="module"></script>
</body>

</html>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search