CSS Flexbox - Aligning by card description - css

Question

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>

Answer 1

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>