Stretch Elements' Height To Match The Tallest - jQuery serialflex

If you want to guarantee that an element has the same height as other elements, whether on a different line or on the same line, and your content is somewhat lengthy, this jQuery plugin might be just what you need.

serialflex is a lightweight and effective jQuery equal height plugin that automatically stretches elements' height to match the tallest. Works well with responsive design.

See How To Create Equal Height Columns In Modern Web Design for more details about Equal Height.

How to use it:

1. Load the minified versio of the jQuery serialflex plugin after jQuery.

<script src="/path/to/cdn/jquery.min.js"></script>
<script src="/path/to/dist/jquery.serialflex.min.js"></script>

2. Add the data-serialflex attribute to the content blocks which should have the same height.

<div class="example">
  <ul>
    <li><p data-serialflex="customname">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p></li>
    <li><p data-serialflex="customname">Sit amet consectetur adipiscing elit.</p></li>
    <li><p data-serialflex="customname">Cras porta finibus ullamcorper pellentesque ut purus purus nam convallis dapibus ullamcorper.</p></li>
    <li><p data-serialflex="customname">Ipsum dolor sit amet.</p></li>
    <li><p data-serialflex="customname">Lorem ipsum dolor sit amet consectetur adipiscing elitras porta finibus ullamcentesque ut purus convallis dapibus ullamcorper.</p></li>
    <li><p data-serialflex="customname">Porta finibus ullamcentesque ut purus convallis dapibus ullamcorper</p></li>
  </ul>
</div>

3. Initialize the plugin on document ready.

$(document).ready(function(){
  $('[data-serialflex]').serialflex();
});

4. Example CSS styles for this example.

ul,li { list-style: none; }

.box ul {
  overflow: hidden;
  margin: -40px 0 0 -40px;
}

.box ul > li {
  float: left;
  width: 33.333%;
  padding-left: 40px;
  padding-top: 40px;
  text-align: center;
}

@media (max-width:800px) {
  .box ul > li {
    width: 45%;
  }
}

@media (max-width:400px) {
  .box ul > li {
    width: 100%;
  }
}

[data-serialflex] {
  display: flex;
  align-items: center;
  padding: 40px;
  background-color: rgba(255, 255, 255, .025);
  font-size: 12px;
  color: rgba(255, 255, 255, .15);
  transition: height 600ms;
}

5. Determine whether to force the plugin to update on window resize. Default: false.

$(document).ready(function(){
  $('[data-serialflex]').serialflex({
    forceRefresh: true
  });
});

---

This awesome jQuery plugin is developed by kevinmeunier. For more Advanced Usages, please check the demo page or visit the official website.