LOADING...

Preview

Pen ID
Unlock Campus Themeforest adv

 

Code
Cheesecake
Desserts
Jenn Davis
cheesecake

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ea ipsum sit perspiciatis iusto commodi nihil tenetur veritatis adipisci sed? Illo nobis similique in facilis libero ab officia ratione nesciunt fugiat.

Cheesecake
Desserts
Jenn Davis
cheesecake
Cheesecake
Desserts
Jenn Davis
cheesecake

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

Cheesecake
Desserts
Jenn Davis
cheesecake

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ea ipsum sit perspiciatis iusto commodi nihil tenetur veritatis adipisci sed? Illo nobis similique in facilis libero ab officia ratione nesciunt fugiat.

Cheesecake
Desserts
Jenn Davis
cheesecake

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ea ipsum sit perspiciatis iusto commodi nihil tenetur veritatis adipisci sed? Illo nobis similique in facilis libero ab officia ratione nesciunt fugiat.

CSS
* {
  box-sizing: border-box;
}

.module-card-wrap {
  max-width: 70%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  margin: 0 auto;
}

.module-card {
  background: #fff;
  border: 1px solid #f1f1f1;
  box-shadow: 1px 1px 2px rgba(0,0,0,0.05);
  min-width: 100%;
  padding: 10px;
  margin-bottom: 5%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}

.module-card-title {
  font-size: 120%; 
  font-weight: 700;
}

.module-card-meta {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.module-card-category, .module-card-author {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
}

.module-card-author {
  text-align: right;
}

.module-card-bottom {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-flex: 1;
      -ms-flex-positive: 1;
          flex-grow: 1; /* a flex: 1 also works here, but is buggy on IE11 */
}

.module-card-img {
  margin: 20px 0;
  -ms-flex-item-align: center;
      -ms-grid-row-align: center;
      align-self: center;
  width: 100%;
  height: auto;
}

.module-card-button {
  background: seagreen;
  color: white;
  border: none;
  margin-top: auto;
  padding: 10px;
}

@media screen and (min-width: 600px) {
  .module-card {
    width: 48%;
    margin: 0 auto 2%;
    min-width: 0;
  }
}
Host Instantly Drag and Drop Website Builder

 

Description

Flexbox demo to showcase a card module, with equal heights and accommodating elements. Was used as a demo in a Smashing Magazine article, March 2015: http://www.smashingmagazine.com/2015/03/02/harnessing-flexbox-for-todays-web-apps
Term
Mon, 11/27/2017 - 21:56

Related Codes

Pen ID
Pen ID
Pen ID