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

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

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

<?php }?>

<?php the_excerpt(); ?>

</div>