{"id":14861,"date":"2016-03-17T08:42:14","date_gmt":"2016-03-17T07:42:14","guid":{"rendered":"http:\/\/www.criteriondg.info\/wordpress\/?p=14861"},"modified":"2024-02-04T08:57:53","modified_gmt":"2024-02-04T07:57:53","slug":"recursos-y-materiales-para-dar-tus-primeros-pasos-con-flexbox","status":"publish","type":"post","link":"https:\/\/www.criteriondg.info\/wordpress\/recursos-y-materiales-para-dar-tus-primeros-pasos-con-flexbox\/","title":{"rendered":"Recursos y materiales para dar tus primeros pasos con Flexbox"},"content":{"rendered":"<p><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/www.criteriondg.info\/wordpress\/uploads\/flexbox.jpg\" alt=\"flexbox\" width=\"800\" height=\"466\" class=\"alignnone size-full wp-image-14863\" srcset=\"https:\/\/www.criteriondg.info\/wordpress\/uploads\/flexbox.jpg 800w, https:\/\/www.criteriondg.info\/wordpress\/uploads\/flexbox-768x447.jpg 768w, https:\/\/www.criteriondg.info\/wordpress\/uploads\/flexbox-300x175.jpg 300w\" sizes=\"auto, (max-width: 800px) 100vw, 800px\" \/><\/p>\n<p>Mientras recopilaba algunos recursos que a\u00f1adir en <a href=\"http:\/\/www.thestarterkit.info\/\" target=\"_blank\">The Starter Kit<\/a>, encontr\u00e9 <a href=\"http:\/\/www.flexboxdefense.com\/\" target=\"_blank\">Flexbox defense [en]<\/a>, un acercamiento b\u00e1sico y sencillo a las bases del uso de Flexbox en nuestros proyectos de maquetaci\u00f3n html\/css.<\/p>\n<p>Irremediablemente me record\u00f3 a <a href=\"http:\/\/flexboxfroggy.com\/\" target=\"_blank\">Flexbox Froggy [en]<\/a>, cuyo objetivo (y todo en general) es similar: hacernos entender c\u00f3mo funciona el uso de flexbox mediante sencillos ejercicios.<\/p>\n<p>Recuerdo que tanto este \u00abFroggy\u00bb como el ejercicio similar para aprender m\u00e1s sobre el uso de selectores CSS, <a href=\"http:\/\/flukeout.github.io\/\" target=\"_blank\">CSS Dinner [en]<\/a>, me tuvieron bastante entretenido y sin embargo nunca he llegado a mencionarlos por aqu\u00ed hasta ahora. <\/p>\n<p>Si alguien os pide un recurso r\u00e1pido para conocer las bases, con estas utilidades vais servidos bajo mi opini\u00f3n.<\/p>\n<p>Sobre el uso de Flexbox, tambi\u00e9n me apa\u00f1\u00e9 con <a href=\"http:\/\/flexbox.io\/\" target=\"_blank\">What The Flexbox [en]<\/a>, un curso gratuito dividido en peque\u00f1as video-lecciones, que trata con m\u00e1s calma y profundidad todo el mundillo en torno a Flexbox. Los juegos mencionados anteriormente est\u00e1n bien para tener una introducci\u00f3n y asimilar algunos conceptos b\u00e1sicos pero What The Flexbox nos permite ir un par de pasos m\u00e1s all\u00e1.<\/p>\n<p>Luego si queremos tener una \u00abchuleta\u00bb a mano de referencia r\u00e1pida, siempre tendremos la grand\u00edsima web de CSS Tricks para solucionarnos la papeleta \ud83d\ude42 <a href=\"https:\/\/css-tricks.com\/snippets\/css\/a-guide-to-flexbox\/\" target=\"_blank\">A Complete Guide to Flexbox [en]<\/a>.<\/p>\n<p>Por \u00faltimo, publicaban hace no demasiado en Smashing Magazine el art\u00edculo <a href=\"https:\/\/www.smashingmagazine.com\/2016\/02\/the-flexbox-reading-list\/\" target=\"_blank\">The Flexbox Reading List: Techniques And Tools<\/a> con el que termino completando esta ronda r\u00e1pida de recursos y materiales con los que dar unos primeros pasos con Flexbox.<\/p>\n<p>\u00bfHay alguno realmente interesante que no est\u00e9 mencionado? Estar\u00e9 encantado de poder revisarlo \ud83d\ude42<\/p>\n<p class=\"update\">A\u00f1ado <a href=\"http:\/\/flexboxin5.com\/\" target=\"_blank\">Flexbox in 5 minutes<\/a> cortes\u00eda del bueno de <a href=\"https:\/\/twitter.com\/aarongarciah\" target=\"_blank\">Aar\u00f3n Garc\u00eda<\/a> \ud83d\ude42<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Mientras recopilaba algunos recursos que a\u00f1adir en The Starter Kit, encontr\u00e9 Flexbox defense [en], un acercamiento b\u00e1sico y sencillo a las bases del uso de Flexbox en nuestros proyectos de maquetaci\u00f3n html\/css. Irremediablemente me record\u00f3 a Flexbox Froggy [en], cuyo objetivo (y todo en general) es similar: hacernos entender c\u00f3mo funciona el uso de flexbox [&hellip;]<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[10,3],"tags":[123,159,25],"class_list":["post-14861","post","type-post","status-publish","format-standard","hentry","category-diseno-web","category-diseno","tag-css","tag-diseno-web","tag-recursos"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.6 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Recursos y materiales para dar tus primeros pasos con Flexbox - Criterion<\/title>\n<meta name=\"description\" content=\"Mientras recopilaba algunos recursos que a\u00f1adir en The Starter Kit, encontr\u00e9 Flexbox defense , un acercamiento b\u00e1sico y sencillo a las bases del uso de\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.criteriondg.info\/wordpress\/recursos-y-materiales-para-dar-tus-primeros-pasos-con-flexbox\/\" \/>\n<meta property=\"og:locale\" content=\"es_ES\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Recursos y materiales para dar tus primeros pasos con Flexbox - Criterion\" \/>\n<meta property=\"og:description\" content=\"Mientras recopilaba algunos recursos que a\u00f1adir en The Starter Kit, encontr\u00e9 Flexbox defense , un acercamiento b\u00e1sico y sencillo a las bases del uso de\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.criteriondg.info\/wordpress\/recursos-y-materiales-para-dar-tus-primeros-pasos-con-flexbox\/\" \/>\n<meta property=\"og:site_name\" content=\"Criterion\" \/>\n<meta property=\"article:published_time\" content=\"2016-03-17T07:42:14+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-02-04T07:57:53+00:00\" \/>\n<meta property=\"og:image\" content=\"http:\/\/www.criteriondg.info\/wordpress\/uploads\/flexbox.jpg\" \/>\n<meta name=\"author\" content=\"Skeku\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@Skeku\" \/>\n<meta name=\"twitter:site\" content=\"@Skeku\" \/>\n<meta name=\"twitter:label1\" content=\"Escrito por\" \/>\n\t<meta name=\"twitter:data1\" content=\"Skeku\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tiempo de lectura\" \/>\n\t<meta name=\"twitter:data2\" content=\"1 minuto\" \/>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Recursos y materiales para dar tus primeros pasos con Flexbox - Criterion","description":"Mientras recopilaba algunos recursos que a\u00f1adir en The Starter Kit, encontr\u00e9 Flexbox defense , un acercamiento b\u00e1sico y sencillo a las bases del uso de","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.criteriondg.info\/wordpress\/recursos-y-materiales-para-dar-tus-primeros-pasos-con-flexbox\/","og_locale":"es_ES","og_type":"article","og_title":"Recursos y materiales para dar tus primeros pasos con Flexbox - Criterion","og_description":"Mientras recopilaba algunos recursos que a\u00f1adir en The Starter Kit, encontr\u00e9 Flexbox defense , un acercamiento b\u00e1sico y sencillo a las bases del uso de","og_url":"https:\/\/www.criteriondg.info\/wordpress\/recursos-y-materiales-para-dar-tus-primeros-pasos-con-flexbox\/","og_site_name":"Criterion","article_published_time":"2016-03-17T07:42:14+00:00","article_modified_time":"2024-02-04T07:57:53+00:00","og_image":[{"url":"http:\/\/www.criteriondg.info\/wordpress\/uploads\/flexbox.jpg","type":"","width":"","height":""}],"author":"Skeku","twitter_card":"summary_large_image","twitter_creator":"@Skeku","twitter_site":"@Skeku","twitter_misc":{"Escrito por":"Skeku","Tiempo de lectura":"1 minuto"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.criteriondg.info\/wordpress\/recursos-y-materiales-para-dar-tus-primeros-pasos-con-flexbox\/#article","isPartOf":{"@id":"https:\/\/www.criteriondg.info\/wordpress\/recursos-y-materiales-para-dar-tus-primeros-pasos-con-flexbox\/"},"author":{"name":"Skeku","@id":"https:\/\/www.criteriondg.info\/wordpress\/#\/schema\/person\/e3e9eb3b79728755608032520ae22a91"},"headline":"Recursos y materiales para dar tus primeros pasos con Flexbox","datePublished":"2016-03-17T07:42:14+00:00","dateModified":"2024-02-04T07:57:53+00:00","mainEntityOfPage":{"@id":"https:\/\/www.criteriondg.info\/wordpress\/recursos-y-materiales-para-dar-tus-primeros-pasos-con-flexbox\/"},"wordCount":300,"commentCount":5,"publisher":{"@id":"https:\/\/www.criteriondg.info\/wordpress\/#\/schema\/person\/e3e9eb3b79728755608032520ae22a91"},"image":{"@id":"https:\/\/www.criteriondg.info\/wordpress\/recursos-y-materiales-para-dar-tus-primeros-pasos-con-flexbox\/#primaryimage"},"thumbnailUrl":"http:\/\/www.criteriondg.info\/wordpress\/uploads\/flexbox.jpg","keywords":["CSS","Dise\u00f1o web","Recursos"],"articleSection":["Dise\u00f1o web","Recursos"],"inLanguage":"es","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.criteriondg.info\/wordpress\/recursos-y-materiales-para-dar-tus-primeros-pasos-con-flexbox\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.criteriondg.info\/wordpress\/recursos-y-materiales-para-dar-tus-primeros-pasos-con-flexbox\/","url":"https:\/\/www.criteriondg.info\/wordpress\/recursos-y-materiales-para-dar-tus-primeros-pasos-con-flexbox\/","name":"Recursos y materiales para dar tus primeros pasos con Flexbox - Criterion","isPartOf":{"@id":"https:\/\/www.criteriondg.info\/wordpress\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.criteriondg.info\/wordpress\/recursos-y-materiales-para-dar-tus-primeros-pasos-con-flexbox\/#primaryimage"},"image":{"@id":"https:\/\/www.criteriondg.info\/wordpress\/recursos-y-materiales-para-dar-tus-primeros-pasos-con-flexbox\/#primaryimage"},"thumbnailUrl":"http:\/\/www.criteriondg.info\/wordpress\/uploads\/flexbox.jpg","datePublished":"2016-03-17T07:42:14+00:00","dateModified":"2024-02-04T07:57:53+00:00","description":"Mientras recopilaba algunos recursos que a\u00f1adir en The Starter Kit, encontr\u00e9 Flexbox defense , un acercamiento b\u00e1sico y sencillo a las bases del uso de","breadcrumb":{"@id":"https:\/\/www.criteriondg.info\/wordpress\/recursos-y-materiales-para-dar-tus-primeros-pasos-con-flexbox\/#breadcrumb"},"inLanguage":"es","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.criteriondg.info\/wordpress\/recursos-y-materiales-para-dar-tus-primeros-pasos-con-flexbox\/"]}]},{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/www.criteriondg.info\/wordpress\/recursos-y-materiales-para-dar-tus-primeros-pasos-con-flexbox\/#primaryimage","url":"http:\/\/www.criteriondg.info\/wordpress\/uploads\/flexbox.jpg","contentUrl":"http:\/\/www.criteriondg.info\/wordpress\/uploads\/flexbox.jpg"},{"@type":"BreadcrumbList","@id":"https:\/\/www.criteriondg.info\/wordpress\/recursos-y-materiales-para-dar-tus-primeros-pasos-con-flexbox\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.criteriondg.info\/wordpress\/"},{"@type":"ListItem","position":2,"name":"Recursos y materiales para dar tus primeros pasos con Flexbox"}]},{"@type":"WebSite","@id":"https:\/\/www.criteriondg.info\/wordpress\/#website","url":"https:\/\/www.criteriondg.info\/wordpress\/","name":"Criterion","description":"Blog de dise\u00f1o y recursos gr\u00e1ficos de Armando Sotoca. Reflexiones, noticias y filosofadas sobre dise\u00f1o e inspiraci\u00f3n visual.","publisher":{"@id":"https:\/\/www.criteriondg.info\/wordpress\/#\/schema\/person\/e3e9eb3b79728755608032520ae22a91"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.criteriondg.info\/wordpress\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"es"},{"@type":["Person","Organization"],"@id":"https:\/\/www.criteriondg.info\/wordpress\/#\/schema\/person\/e3e9eb3b79728755608032520ae22a91","name":"Skeku","image":{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/www.criteriondg.info\/wordpress\/uploads\/cropped-logo-1.jpg","url":"https:\/\/www.criteriondg.info\/wordpress\/uploads\/cropped-logo-1.jpg","contentUrl":"https:\/\/www.criteriondg.info\/wordpress\/uploads\/cropped-logo-1.jpg","width":250,"height":250,"caption":"Skeku"},"logo":{"@id":"https:\/\/www.criteriondg.info\/wordpress\/uploads\/cropped-logo-1.jpg"},"sameAs":["https:\/\/x.com\/Skeku"]}]}},"_links":{"self":[{"href":"https:\/\/www.criteriondg.info\/wordpress\/wp-json\/wp\/v2\/posts\/14861","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.criteriondg.info\/wordpress\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.criteriondg.info\/wordpress\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.criteriondg.info\/wordpress\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.criteriondg.info\/wordpress\/wp-json\/wp\/v2\/comments?post=14861"}],"version-history":[{"count":0,"href":"https:\/\/www.criteriondg.info\/wordpress\/wp-json\/wp\/v2\/posts\/14861\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.criteriondg.info\/wordpress\/wp-json\/wp\/v2\/media?parent=14861"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.criteriondg.info\/wordpress\/wp-json\/wp\/v2\/categories?post=14861"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.criteriondg.info\/wordpress\/wp-json\/wp\/v2\/tags?post=14861"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}