Warning: count(): Parameter must be an array or an object that implements Countable in /data/web/virtuals/104571/virtual/www/blog/wp-includes/post-template.php on line 284
Flexbox

Flexbox

Hi guys,

I decided to give a try to a relatively new CSS grid layout called Flexbox. This new layout mode in CSS3 should allow very nice scaling of elements on the page regardless of screen size. If this turns out to work I would try implementing it as much as possible because in ideal scenario it should make your page really nicely scaled no matter what your monitor size is or what block size you use.

For starters I tried implementing it in the Spain – Current conditions block, which previously was problematic, the squares where the city name was long wrapped incorrectly and created undesirable gaps.

I would therefore like to ask everyone to look at the DEMO link below and tell me in the comments if it works fine/does not look nice in the browser you use on the device/monitor you use.

This could then theoretically be implemented at many places, especially blocks (Current etc.)

Thanks

Flexbox test (look at the “more” section)

16 thoughts on “Flexbox

  1. Hi Jachym
    Working perfectly on a computer 15.6″ screen and amazingly, working perfectly on a 5.5″ Samsung galaxy j7 in portrait mode!!!!!
    Another one of your” great inventions” that will probably solve many of the current issues regarding correct display in diferent screen sizes.
    Perfect!

  2. Good morning Jachym

    I’ve seen your Flexbox test page.

    In my case it works perfectly

    System:

    – Pc desktop
    – Monitor Resolution: 1600 x 900

    Saludos from San Sebastian

    Javier

  3. Jachym,
    I tried it on my laptop and 7 inch tablet and the block worked fine on both. I even tried in landscape and portrait mode on the tablet and it looked great in both.
    Jay

Leave a Comment