<div class="container">
<div class="flex-item-custom">
  <div class="header-content">
    Image here
  </div>
  <div class="body-content">
  Display Flexbox system
  </div>
  <div class='footer-content'>
    <span>Author</span>
    <span>Categories</span>
    <span>Times</span>
  </div>
</div>
  <div class="flex-item-custom">
  <div class="header-content">
    Image here
  </div>
  <div class="body-content">
  Display Flexbox system
  </div>
  <div class='footer-content'>
    <span>Author</span>
    <span>Categories</span>
    <span>Times</span>
  </div>
</div>
  <div class="flex-item-custom">
  <div class="header-content">
    Image here
  </div>
  <div class="body-content">
  Display Flexbox system
  </div>
  <div class='footer-content'>
    <span>Author</span>
    <span>Categories</span>
    <span>Times</span>
  </div>
</div>
  <div class="flex-item-custom">
  <div class="header-content">
    Image here
  </div>
  <div class="body-content">
  Display Flexbox system 444444 4444 4444 4444 444
  </div>
  <div class='footer-content'>
    <span>Author</span>
    <span>Categories</span>
    <span>Times</span>
  </div>
</div>
</div>
.container {
  display:flex;
  flex-direction: row;
  justify-content:space-between;
  flex-shrink: 1;
  flex-wrap:wrap;
}
.flex-item-custom {
  display:flex;
  flex-direction:column;
  flex-basis:calc(calc(100% / 4) - 10px);
  border-radius:4px;
  border:1px solid #ccc;
  box-shadow: 0 15px 35px -10px rgb(0 0 0 / 7%);
  box-sizing:border-box;
  margin:5px;
}
 .flex-item-custom .header-content {
  padding-bottom:75%;
  align-content:center;
  background-color:lightblue;
}
.flex-item-custom .body-content {
  padding:10px;
  font-size:18px;
  font-weight:500;
  color:rgb(0 0 0 / 75%);
  flex:1;
}

.flex-item-custom .footer-content {
  display:flex;
  flex-direction:row;
  color:rgb(0 0 0 /75%);
  justify-content:space-between;
  padding:10px;
  border-top:1px solid #eee;
  margin-top:auto;
}
.flex-item-custom .footer-content:nth-child(1) {
  flex-shrink: 1;
}
.flex-item-custom .footer-content:nth-child(2) {
  flex-shrink: 1;
}
.flex-item-custom .footer-content:nth-child(3) {
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.