Выравнивание блоков

Выравнивание типовых блоков с

by Anatoly Kulikov

HTML

<div class="row">
  <div class="block-3">
    <div class="card">
      <div>
        <div class="card-image"></div>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
      </div>
      <div class="link">
        <a href="@">Link</a>
      </div>
    </div>
  </div>
  <div class="block-3">
    <div class="card">
      <div>
        <div class="card-image"></div>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatem suscipit quisquam ullam, ut ipsa vero rem tempora. Officia nostrum eveniet quia, ab explicabo, autem necessitatibus amet ducimus quae nam eligendi.</p>
      </div>
      <div class="link">
        <a href="@">Link</a>
      </div>
    </div>
  </div>
  <div class="block-3">
    <div class="card">
      <div>
        <div class="card-image"></div>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sed accusamus a nulla doloremque, ratione voluptas quo ex veritatis!</p>
      </div>
      <div class="link">
        <a href="@">Link</a>
      </div>
    </div>
  </div>
  <div class="block-3">
    <div class="card">
      <div>
        <div class="card-image"></div>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
      </div>
      <div class="link">
        <a href="@">Link</a>
      </div>
    </div>
  </div>
</div>

SCSS

* {
  box-sizing: border-box;
}
body {
  background: #f7f7f7;
}
.row {
  display: flex;
  flex-wrap: wrap;
  aligh-items: stretch;
  width: 100%;
}

.block-3 {
  display: block;
  width: 25%;
  padding: 0 14px;
}

.card {
  display: flex;
  flex-wrap: wrap;
  aligh-items: stretch;
  align-content: space-between;
  width: 100%;
  height: 100%;
  background: #fff;
  
  &-image {
    display: block;
    width: 100%;
    height: 120px;
    background: #1E88E5;
  }
  
  p {
    padding: 10px;
  }
  
  .link {
    display: block;
    padding: 10px;
    
    a {
      text-decoration: none;
      color: #1E88E5;
    }
  }
}