{"id":3120,"date":"2017-07-27T21:33:14","date_gmt":"2017-07-27T19:33:14","guid":{"rendered":"http:\/\/meteotemplate.com\/blog\/?p=3120"},"modified":"2017-07-27T21:33:14","modified_gmt":"2017-07-27T19:33:14","slug":"flexbox","status":"publish","type":"post","link":"https:\/\/meteotemplate.com\/blog\/?p=3120","title":{"rendered":"Flexbox"},"content":{"rendered":"<p>Hi guys,<\/p>\n<p>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.<\/p>\n<p>For starters I tried implementing it in the Spain &#8211; Current conditions block, which previously was problematic, the squares where the city name was long wrapped incorrectly and created undesirable gaps.<\/p>\n<p>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.<\/p>\n<p>This could then theoretically be implemented at many places, especially blocks (Current etc.)<\/p>\n<p>Thanks<\/p>\n<p><a href=\"http:\/\/www.meteotemplate.com\/template\/indexBlockDemoWide.php?block=currentES\" target=\"_blank\" rel=\"noopener\">Flexbox test<\/a> (look at the &#8220;more&#8221; section)<\/p>\n<div style=\"min-height: 30px;display: inline-block;\"><input id=\"3120\" style=\"float: right;max-width: 50px;\" src=\"https:\/\/meteotemplate.com\/blog\/wp-content\/plugins\/wp-advanced-pdf\/asset\/images\/pdf.png\" alt=\"#TB_inline?height=230&amp;width=400&amp;inlineId=examplePopup1\" title=\"Export pdf to your Email\" class=\"thickbox export-pdf\" type=\"image\" value=\"Export to PDF\" \/><\/div>","protected":false},"excerpt":{"rendered":"<p>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 &#8230; <a title=\"Flexbox\" class=\"read-more\" href=\"https:\/\/meteotemplate.com\/blog\/?p=3120\">Read more<span class=\"screen-reader-text\">Flexbox<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":647,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_mi_skip_tracking":false,"_exactmetrics_sitenote_active":false,"_exactmetrics_sitenote_note":"","_exactmetrics_sitenote_category":0},"categories":[538],"tags":[564,17,565,7],"aioseo_notices":[],"jetpack_featured_media_url":"https:\/\/meteotemplate.com\/blog\/wp-content\/uploads\/2016\/06\/blocks.png","_links":{"self":[{"href":"https:\/\/meteotemplate.com\/blog\/index.php?rest_route=\/wp\/v2\/posts\/3120"}],"collection":[{"href":"https:\/\/meteotemplate.com\/blog\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/meteotemplate.com\/blog\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/meteotemplate.com\/blog\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/meteotemplate.com\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=3120"}],"version-history":[{"count":1,"href":"https:\/\/meteotemplate.com\/blog\/index.php?rest_route=\/wp\/v2\/posts\/3120\/revisions"}],"predecessor-version":[{"id":3121,"href":"https:\/\/meteotemplate.com\/blog\/index.php?rest_route=\/wp\/v2\/posts\/3120\/revisions\/3121"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/meteotemplate.com\/blog\/index.php?rest_route=\/wp\/v2\/media\/647"}],"wp:attachment":[{"href":"https:\/\/meteotemplate.com\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=3120"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/meteotemplate.com\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=3120"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/meteotemplate.com\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=3120"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}