Flexbox
Creating a responsive Ajax Load More grid with Flexbox
In this example:
Ajax Load More will use CSS3 Flexbox to create a flexible and responsive grid for displaying posts.
Ajax Load More Post Example
Cras justo odio, dapibus ac facilisis in, egestas eget...
Donec ullam corper nulla metus auctor frinel
Integer posuere erat a ante venenatis dapibus posuere velit...
Lorem Ipsum Maec diam eget risus varius blandit
Lorem Ipsum aenean lacinia bibendum nulla sed consectetur. Nullam...
Pellentesque ornare sem lacinia quam venenatis vestibulum
Nullam quis risus eget urna mollis ornare vel eu...
Diam eget risus varius blandit sit amet
Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor...
CSS
The following CSS was used to create the Flexbox layout as seen this example.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 | .alm-listing.flexbox, .alm-listing.flexbox .alm-reveal{ display: flex; -webkit-flex-direction: row; -ms-flex-direction: row; flex-direction: row; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; width: 100%; } .alm-listing.flexbox .flex-item{ -webkit-flex: 1 0 180px; -ms-flex: 1 0 180px; flex: 1 0 180px; justify-content: space-around; margin: 10px; padding: 10px; background: #f7f7f7; border: 1px solid #efefef; } .alm-listing.flexbox .flex-item img{ display: block; clear: both; margin: 0; position: static; } .alm-listing.flexbox .flex-item h3, .alm-listing.flexbox .flex-item p{ text-align: center; } .alm-listing.flexbox .flex-item h3{ padding: 15px 15px 0; font-size: 17px; } .alm-listing.flexbox .flex-item h3 a{ color: #222; } .alm-listing.flexbox .flex-item p{ font-size: 13px; } |
The following shortcode was used to create the Flexbox example.
[ajax_load_more preloaded="true" repeater="template_34" post_type="ajax_more" pause="true" transition="fade" images_loaded="true" button_label="Load More" button_loading_label="Loading..." container_type="div" css_classes="flexbox"]The following Repeater Template was used to create the Flexbox example.
1 2 3 4 5 6 7 8 9 | <div class="flex-item"> <?php if ( has_post_thumbnail() ) { ?> <a href="<?php the_permalink(); ?>"><?php the_post_thumbnail('alm-cta'); ?></a> <?php }?> <div class="details"> <h3><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h3> <?php the_excerpt(); ?> </div> </div> |