Infinite Scroll Flexbox Layout | Examples

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

Sociis natoque penatibus et magnis dis parturient montes, nascetur...

Lorem Ipsum Maec diam eget risus varius blandit

Donec ullamcorper nulla non metus auctor fringilla. Maecenas faucibus...

Pellentesque ornare sem lacinia quam venenatis vestibulum

Maecenas faucibus mollis interdum. Morbi leo risus, porta ac...

Diam eget risus varius blandit sit amet

Maecenas faucibus mollis interdum. Morbi leo risus, porta ac...

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

.alm-listing.flexbox .alm-reveal{

display: flex;

flex-wrap: wrap;

width: 100%;

}

.alm-listing.flexbox .flex-item{

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;

}

.alm-listing.flexbox .flex-item h3{

padding: 15px 15px 0;

font-size: 16px;

}

.alm-listing.flexbox .flex-item p{

font-size: 12px;

}

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

<?php if ( has_post_thumbnail() ) { ?>

<?php }?>

<?php the_excerpt(); ?>

</div>