{"id":1407,"date":"2024-05-22T17:32:07","date_gmt":"2024-05-22T17:32:07","guid":{"rendered":"https:\/\/orpot.com\/blog\/?p=1407"},"modified":"2024-05-22T17:32:07","modified_gmt":"2024-05-22T17:32:07","slug":"css-flexbox-aumentar-o-reducir-un-elemento-si-es-necesario","status":"publish","type":"post","link":"https:\/\/orpot.com\/blog\/css-flexbox-aumentar-o-reducir-un-elemento-si-es-necesario\/","title":{"rendered":"CSS Flexbox: Aumentar o reducir un elemento si es necesario"},"content":{"rendered":"<header class=\"article-header\">\n<h1 class=\"title\"><span style=\"font-size: 16px;\">flex-grow<\/span><\/h1>\n<\/header>\n<article class=\"article-content\">El valor predeterminado para cualquier elemento es 0.<\/p>\n<p>Si todos los elementos se definen como 1 y uno se define como 2, el elemento m\u00e1s grande ocupar\u00e1 el espacio de dos elementos \u00ab1\u00bb.<\/p>\n<h3>flex-shrink<\/h3>\n<p>El valor predeterminado para cualquier elemento es 1.<\/p>\n<p>Si todos los elementos se definen como 1 y uno se define como 3, el elemento m\u00e1s grande se reducir\u00e1 3 veces m\u00e1s que los otros. Cuando hay menos espacio disponible, ocupar\u00e1 3 veces menos espacio.<\/p>\n<h3>flex-basis<\/h3>\n<p>Si se establece en auto, dimensiona un elemento seg\u00fan su ancho o altura, y agrega espacio adicional seg\u00fan la propiedad flex-grow.<\/p>\n<p>Si se establece en 0, no agrega ning\u00fan espacio adicional para el elemento al calcular el dise\u00f1o.<\/p>\n<p>Si especificas un valor de n\u00famero de p\u00edxel, se usar\u00e1 como el valor de longitud (ancho o altura dependiendo si es un elemento de fila o columna)<\/p>\n<h3>flex<\/h3>\n<p>Esta propiedad combina las 3 propiedades anteriores:<\/p>\n<ul>\n<li>flex-grow<\/li>\n<li>flex-shrink<\/li>\n<li>flex-basis<\/li>\n<\/ul>\n<p>y proporciona una sintaxis abreviada: flex: 0 1 auto<\/p>\n<\/article>\n","protected":false},"excerpt":{"rendered":"<p>flex-grow El valor predeterminado para cualquier elemento es 0. Si todos los elementos se definen&hellip;<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[179,178],"tags":[],"_links":{"self":[{"href":"https:\/\/orpot.com\/blog\/wp-json\/wp\/v2\/posts\/1407"}],"collection":[{"href":"https:\/\/orpot.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/orpot.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/orpot.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/orpot.com\/blog\/wp-json\/wp\/v2\/comments?post=1407"}],"version-history":[{"count":1,"href":"https:\/\/orpot.com\/blog\/wp-json\/wp\/v2\/posts\/1407\/revisions"}],"predecessor-version":[{"id":1408,"href":"https:\/\/orpot.com\/blog\/wp-json\/wp\/v2\/posts\/1407\/revisions\/1408"}],"wp:attachment":[{"href":"https:\/\/orpot.com\/blog\/wp-json\/wp\/v2\/media?parent=1407"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/orpot.com\/blog\/wp-json\/wp\/v2\/categories?post=1407"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/orpot.com\/blog\/wp-json\/wp\/v2\/tags?post=1407"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}