Scribd
Cargar
326 vistas2 páginas

Guía Completa de Propiedades Flexbox

Este documento resume las propiedades y valores de Flexbox. Flexbox permite crear diseños flexibles de una sola dimensión mediante la manipulación de elementos hijos. Las propiedades clave incluyen display para activar el modo flex, flex-direction para controlar la dirección principal, justify-content y align-items para alinear elementos, y flex para controlar el crecimiento, encogimiento y tamaño base de los elementos hijos.

Cargado por

Mario Esteban
Derechos de autor
© © All Rights Reserved
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como PDF, TXT o lee en línea desde Scribd
326 vistas2 páginas

Guía Completa de Propiedades Flexbox

Este documento resume las propiedades y valores de Flexbox. Flexbox permite crear diseños flexibles de una sola dimensión mediante la manipulación de elementos hijos. Las propiedades clave incluyen display para activar el modo flex, flex-direction para controlar la dirección principal, justify-content y align-items para alinear elementos, y flex para controlar el crecimiento, encogimiento y tamaño base de los elementos hijos.

Cargado por

Mario Esteban
Derechos de autor
© © All Rights Reserved
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como PDF, TXT o lee en línea desde Scribd

Resumen propiedades y valores Flexbox

-Para activar el modo flexbox:


Propiedad valor Descripcion
Display: flex Establece un contenedor de ítems flexible en bloque,
de forma equivalente a block.
Dispaly: inline-flex Establece un contenedor de ítems flexible en línea,
de forma equivalente a inline-block.

-Direccion de los ejes :


Propiedad Valores posibles Descripcion
flex-direction: row Cambia la orientación del eje principal.
row-reverse
column
column-reverse
flex-wrap: nowrap Evita o permite el desbordamiento (multilinea).
wrap
wrap-reverse

-Atajo (short-hand): Dirección de los ejes:


Propiedad Propiedades agrupadas Descripcion
Flex-flow: Flex-direction flex-wrap; Propiedad de atajo (short-hand)
-Propiedades de alineación de ítems

Propiedad Valor Actua sobre


justify-content: flex-start flex-end center space-between
space-around Eje principal
align-content: flex-start flex-end center space-between |
space-around stretch Eje principal
align-items: flex-start flex-end center stretch baseline Eje secundario
align-self: auto | flex-start | flex-end | center | stretch Eje secundario
| baseline

*Diferencia entre align-items y align-self: la propiedad align-self actúa exactamente igual


que align-items, la diferencia es que se utiliza sobre un ítem hijo específico y no sobre el
elemento contenedor.

-Propiedades de ítems hijos

Propiedad Valor Descripcion


flex-grow: x X es un numero entero que indica el crecimiento del ítem
respecto al resto.

flex-shrink: x X es un numero entero que indica el decrecimiento del ítem


respecto al resto.

flex-basis: 100px Tamaño base de los ítems antes de aplicar variación.


auto
initial
inherent

order: x Número (peso) que indica el orden de aparición de los ítems.

Atajo: Propiedades de ítems hijos


La propiedad llamada flex sirve de atajo para tres propiedades de los ítems hijos.

Propiedad Propiedades agrupadas Descripcion


flex: flex-grow flex-shrink flex-basis propiedad de atajo (short-hand)

También podría gustarte