Live examples of Flexbox lists made by Ultimate Post List Pro (plugin for WordPress)

Icon Ultimate Post List Pro

“Ultimate Post List Pro” (UPLP), a WordPress plugin, lets you create fascinating layouts for lists of posts. You can switch your post list type easily to a “Flexbox” and get all the power of that stunning technique.

And you don’t need to write any code! UPLP gives you easy-to-use and yet powerful options for the post list items like the width, the wrapping and the spatial distriution. And of course you have all the other options like the font styles, colours etc. at your fingertips.

The Flexbox support makes “Ultimate Post List Pro” (UPLP) one of the best WordPress plugins for creating customized post lists with many happy users.

Some examples of the Flexbox’ potential

Take a look at the following examples for the Flexbox feature! Hint: You will see the power of the Flexbox layout at its best immediately if you’d resize your browser window slowly.

Flexbox 1, one item centered

The Flexbox settings of this list with 1 item are:

  • List flow direction: row (horizontal axis)
  • List item width: 50%
  • Wrapping: enabled
  • Spatial distribution along the main axis: centered
  • Spatial distribution along the cross axis: centered
  • Spatial distribution of the lines: centered

The Flexbox settings of this list with 7 items are:

  • List flow direction: row (horizontal axis)
  • List item width: 150px
  • Wrapping: enabled
  • Spatial distribution along the main axis: equal spacing
  • Spatial distribution along the cross axis: stretched
  • Spatial distribution of the lines: equal spacing

The Flexbox settings of this list with 9 items are:

  • List flow direction: row (horizontal axis)
  • List item width: 30%
  • Wrapping: enabled
  • Spatial distribution along the main axis: aligned at the axis start
  • Spatial distribution along the cross axis: stretched
  • Spatial distribution of the lines: packed to the container start

Flexbox 4: Three in one row

The Flexbox settings of this list with 3 items are:

  • List flow direction: row (horizontal axis)
  • List item width: 25%
  • Wrapping: disabled
  • Spatial distribution along the main axis: no spacing, i.e. aligned at the axis start and end with equal spacing between the items
  • Spatial distribution along the cross axis: stretched
  • Spatial distribution of the lines: no spacing, i.e. aligned at the axis start and end with equal spacing between the lines

Flexbox 5: Two-columns Layout

The Flexbox settings of this list with 8 items are:

  • List flow direction: row (horizontal axis)
  • List item width: 48%
  • Wrapping: enabled
  • Spatial distribution along the main axis: no spacing, i.e. aligned at the axis start and end with equal spacing between the items
  • Spatial distribution along the cross axis: stretched
  • Spatial distribution of the lines: no spacing, i.e. aligned at the axis start and end with equal spacing between the lines

Get Ultimate Post List Pro

Kerry 2017-05-06
Great Job  

'Ultimate' is right - the plugin Ultimate Post List Pro makes it possible to make all kinds of lists with just about every different feature you might want. Martin was super in helping me fine-tune the appearance. Five stars!

Over 713 orders already processed!

Select your preferred currency

Renewable license for 1 year of updates and support, lifetime use after license expiration:

Add to Cart / In den Warenkorb Includes 0% tax

Get it via a secure purchase with money-back-guarantee!