Johnson
Johnson

Reputation: 1526

CSS Flexbox - Aligning by card description

I have a simple card layout and I want to align it by the card description. Can anyone help me, please? :)

enter image description here

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

Answers (1)

chazsolo
chazsolo

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

Related Questions