{"id":1503,"date":"2024-08-02T06:57:57","date_gmt":"2024-08-02T04:57:57","guid":{"rendered":"https:\/\/blog.sutilweb.eu\/?page_id=1503"},"modified":"2024-08-02T06:57:58","modified_gmt":"2024-08-02T04:57:58","slug":"06-propiedades-de-los-hijos-items","status":"publish","type":"page","link":"https:\/\/sutilweb.eu\/index.php\/lenguajes\/css3\/flex-css\/06-propiedades-de-los-hijos-items\/","title":{"rendered":"06. Propiedades de los hijos (items)"},"content":{"rendered":"\n

A excepci\u00f3n de la propiedad align-self<\/em><\/strong><\/code>, todas las propiedades que hemos visto hasta ahora se aplican sobre el elemento contenedor<\/strong>. Las siguientes propiedades, sin embargo, se aplican sobre los \u00edtems hijos.<\/p>\n\n\n\n\n\n\n\n

Propiedad<\/th>Valor<\/th>Descripci\u00f3n<\/th><\/tr><\/thead>
flex-grow<\/em><\/strong><\/code><\/td>0<\/strong> |<\/td>N\u00famero que indica el factor de crecimiento del \u00edtem respecto al resto.<\/td><\/tr>
flex-shrink<\/em><\/strong><\/code><\/td>1<\/strong> |<\/td>N\u00famero que indica el factor de decrecimiento del \u00edtem respecto al resto.<\/td><\/tr>
flex-basis<\/em><\/strong><\/code><\/td> | content<\/strong><\/td>Tama\u00f1o base de los \u00edtems antes de aplicar variaci\u00f3n.<\/td><\/tr>
order<\/em><\/strong><\/code><\/td>0<\/strong> |<\/td>N\u00famero (peso) que indica el orden de aparici\u00f3n de los \u00edtems.<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n

Primero, tenemos la propiedad flex-grow<\/em><\/strong><\/code> que indica el factor de crecimiento de los \u00edtems en el caso de que no tengan un ancho espec\u00edfico. Por ejemplo, si con flex-grow<\/em><\/strong><\/code> indicamos un valor de 1<\/strong> a todos sus \u00edtems, tendr\u00edan el mismo tama\u00f1o cada uno de ellos. Pero si colocamos un valor de 1<\/strong> a todos los elementos, salvo a uno de ellos, que le indicamos 2<\/strong>, ese \u00edtem ser\u00e1 m\u00e1s grande que los anteriores. Los \u00edtems a los que no se le especifique ning\u00fan valor, tendr\u00e1n por defecto valor de 0<\/strong>.<\/p>\n\n\n\n

En segundo lugar, tenemos la propiedad flex-shrink<\/em><\/strong><\/code> que es la opuesta a flex-grow<\/em><\/strong><\/code>. Mientras que la anterior indica un factor de crecimiento, flex-shrink<\/code> hace justo lo contrario, aplica un factor de decrecimiento. De esta forma, los \u00edtems que tengan un valor num\u00e9rico m\u00e1s grande, ser\u00e1n m\u00e1s peque\u00f1os, mientras que los que tengan un valor num\u00e9rico m\u00e1s peque\u00f1o ser\u00e1n m\u00e1s grandes, justo al contrario de como funciona la propiedad flex-grow<\/em><\/strong><\/code>.<\/p>\n\n\n\n

Por \u00faltimo, tenemos la propiedad flex-basis<\/em><\/strong><\/code>, que define el tama\u00f1o por defecto (de base<\/em>) que tendr\u00e1n los \u00edtems antes de aplicarle la distribuci\u00f3n de espacio. Generalmente, se aplica un tama\u00f1o (unidades, porcentajes, etc\u2026<\/em>), pero tambi\u00e9n se puede aplicar la palabra clave content<\/strong> que ajusta autom\u00e1ticamente el tama\u00f1o al contenido del \u00edtem, que es su valor por defecto.<\/p>\n\n\n\n

Atajo: propiedades de hijos<\/h2>\n\n\n\n

Existe una propiedad llamada flex<\/code> que sirve de atajo para estas tres propiedades de los \u00edtems hijos. Funciona de la siguiente forma.<\/p>\n\n\n\n

Ejm<\/strong><\/p>\n\n\n\n

      .item {\n        \/* flex: <flex-grow> <flex-shrink> <flex-basis> *\/\n        flex: 1 3 35%;\n      }<\/pre>\n","protected":false},"excerpt":{"rendered":"
A excepci\u00f3n de la propiedad align-self, todas las propiedades que hemos visto hasta ahora se aplican sobre el elemento contenedor. Las siguientes […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":1484,"menu_order":5,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_uag_custom_page_level_css":"","site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"class_list":["post-1503","page","type-page","status-publish","hentry"],"uagb_featured_image_src":{"full":false,"thumbnail":false,"medium":false,"medium_large":false,"large":false,"1536x1536":false,"2048x2048":false},"uagb_author_info":{"display_name":"Sutil Web","author_link":"https:\/\/sutilweb.eu\/index.php\/author\/sutilweb\/"},"uagb_comment_info":0,"uagb_excerpt":"A excepci\u00f3n de la propiedad align-self, todas las propiedades que hemos visto hasta ahora se aplican sobre el elemento contenedor. Las siguientes […]","_links":{"self":[{"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/pages\/1503","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/comments?post=1503"}],"version-history":[{"count":2,"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/pages\/1503\/revisions"}],"predecessor-version":[{"id":1505,"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/pages\/1503\/revisions\/1505"}],"up":[{"embeddable":true,"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/pages\/1484"}],"wp:attachment":[{"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/media?parent=1503"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}