Reputation: 1526
I have a simple card layout and I want to align it by the card description. Can anyone help me, please? :)
Here is a Pen: CODEPEN
Here is my HTML structure:
<div class="card-container">
<div class="card">
<div class="card-img"><img src="https://via.placeholder.com/500x500"></div>
<h4 class="card-title">Just a title</h4>
<p class="card-desc">A simple description</p>
</div>
<div class="card">
<div class="card-img"><img src="https://via.placeholder.com/500x500"></div>
<h4 class="card-title">Just a title</h4>
<p class="card-desc">A simple description</p>
</div>
<div class="card">
<div class="card-img"><img src="https://via.placeholder.com/500x500"></div>
<h4 class="card-title">A veeeeery very very very large title</h4>
<p class="card-desc">omg, that description have broken :(</p>
</div>
<div class="card">
<div class="card-img"><img src="https://via.placeholder.com/500x500"></div>
<h4 class="card-title">Just a title</h4>
<p class="card-desc">A simple description</p>
</div>
<div class="card">
<div class="card-img"><img src="https://via.placeholder.com/500x500"></div>
<h4 class="card-title">Just a title</h4>
<p class="card-desc">A simple description</p>
</div>
</div>
Upvotes: 1
Views: 806
Reputation: 8439
By changing the .card
elements to
display: flex;
flex-direction: column;
and adding margin-top: auto;
to the descriptions. This will cause the description element to be pushed to the bottom of the card. Because the cards are stretched vertically, the alignment works on the horizontal axis. This would not be the case if you changed align-items
on the .card-container
to be something other than stretch
.
.card {
display: flex;
flex-direction: column;
text-align: center;
flex: 50%;
padding: 15px 0;
}
.card-img img {
width: 60px;
padding: 15px;
}
.card-title {
font-weight: 700;
text-transform: uppercase;
margin-bottom: 10px;
font-size: 1.2rem;
}
.card-desc {
font-weight: 400;
margin: 0;
margin-top: auto;
line-height: 1rem;
}
.card-container {
background: rgba(255, 0, 0, 0.432);
display: flex;
flex-wrap: wrap;
justify-content: center;
flex: 100%;
}
@media screen and (min-width: 500px) {
.card {
flex: 1;
}
.card-img img {
width: 50px;
}
.card-title {
font-weight: 700;
text-transform: uppercase;
margin-bottom: 10px;
font-size: 1.2rem;
}
.card-desc {
font-weight: 400;
line-height: 1rem;
}
.card-container {
background: rgba(255, 0, 0, 0.432);
display: flex;
flex-wrap: wrap;
justify-content: center;
flex: 100%;
}
}
<div class="card-container">
<div class="card">
<div class="card-img"><img src="https://via.placeholder.com/500x500"></div>
<h4 class="card-title">Just a title</h4>
<p class="card-desc">A simple description</p>
</div>
<div class="card">
<div class="card-img"><img src="https://via.placeholder.com/500x500"></div>
<h4 class="card-title">Just a title</h4>
<p class="card-desc">A simple description</p>
</div>
<div class="card">
<div class="card-img"><img src="https://via.placeholder.com/500x500"></div>
<h4 class="card-title">A veeeeery very very very large title</h4>
<p class="card-desc">omg, that description have broken :(</p>
</div>
<div class="card">
<div class="card-img"><img src="https://via.placeholder.com/500x500"></div>
<h4 class="card-title">Just a title</h4>
<p class="card-desc">A simple description</p>
</div>
<div class="card">
<div class="card-img"><img src="https://via.placeholder.com/500x500"></div>
<h4 class="card-title">Just a title</h4>
<p class="card-desc">A simple description</p>
</div>
</div>
Upvotes: 3