如何使图像在flexbox对齐?

我正在为一个单一项目建立这个网站，遇到了一个问题。在我的网页上，我有一个电影flexbox。有些电影的标题很长，可以把图片往下推，就像你在这个片段中看到的那样:

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>

如何更改代码片段，使所有图像对齐，并在必要时向上移动标题?提前感谢!!

将align-items: end;添加到#movie-slider选择器中。这将使所有子.movie-banner项垂直对齐到"结束"。或者是容器的底部

提示:Ihighly推荐使用此页面来了解flexx

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

我仍然不像我想的那样熟悉它，这是一个很好的资源，可以保持开放的发展。

这个问题有多种解决方案。我为图片和下面的文字添加了一个包装，把justify-content: space-between放在.movie-banner上，然后就好了。另一种选择是限制标题本身的高度&截断。

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>

相关内容

最新更新

热门标签：