Location via proxy:   [ UP ]  
[Report a bug]   [Manage cookies]                
Scribd Logo
Cargar

¡Te damos la bienvenida a Scribd!

  • 20 vistas

    Material Complementario - Propiedades de Flexbox

    Cargado por

    Robert Are
    Este documento describe las propiedades de Flexbox y sus posibles valores. Las propiedades principales incluyen display, flex-direction, flex-wrap, flex-flow, justify-content, align-items, align-content y align-self, las cuales controlan la dirección, envuelto, alineación y tamaño de los elementos dentro de un contenedor flexible. También describe propiedades como flex-basis, flex-grow y flex-shrink que controlan el tamaño base y crecimiento/encogimiento de los elementos flexibles.

    Copyright:

    © All Rights Reserved
    Descargue como PDF, TXT o lea en línea desde Scribd

    Material Complementario - Propiedades de Flexbox

    Cargado por

    Robert Are
    20 vistas7 páginas
    Este documento describe las propiedades de Flexbox y sus posibles valores. Las propiedades principales incluyen display, flex-direction, flex-wrap, flex-flow, justify-content, align-items, align-content y align-self, las cuales controlan la dirección, envuelto, alineación y tamaño de los elementos dentro de un contenedor flexible. También describe propiedades como flex-basis, flex-grow y flex-shrink que controlan el tamaño base y crecimiento/encogimiento de los elementos flexibles.

    Derechos de autor

    © © All Rights Reserved

    Formatos disponibles

    PDF, TXT o lea en línea desde Scribd

    ¿Le pareció útil este documento?

    ¿Este contenido es inapropiado?

    Este documento describe las propiedades de Flexbox y sus posibles valores. Las propiedades principales incluyen display, flex-direction, flex-wrap, flex-flow, justify-content, align-items, align-content y align-self, las cuales controlan la dirección, envuelto, alineación y tamaño de los elementos dentro de un contenedor flexible. También describe propiedades como flex-basis, flex-grow y flex-shrink que controlan el tamaño base y crecimiento/encogimiento de los elementos flexibles.

    Copyright:

    © All Rights Reserved
    Descargue como PDF, TXT o lea en línea desde Scribd
    Descargar como pdf o txt
    20 vistas7 páginas

    Material Complementario - Propiedades de Flexbox

    Cargado por

    Robert Are
    Este documento describe las propiedades de Flexbox y sus posibles valores. Las propiedades principales incluyen display, flex-direction, flex-wrap, flex-flow, justify-content, align-items, align-content y align-self, las cuales controlan la dirección, envuelto, alineación y tamaño de los elementos dentro de un contenedor flexible. También describe propiedades como flex-basis, flex-grow y flex-shrink que controlan el tamaño base y crecimiento/encogimiento de los elementos flexibles.

    Copyright:

    © All Rights Reserved
    Descargue como PDF, TXT o lea en línea desde Scribd
    Descargar como pdf o txt
    de 7

    Material Complementario

    Propiedades
    de Flexbox
    Pasemos a ver cuáles son las propiedades de Flexbox, sus posibles valores y lo que hace
    cada una de ellas:

    display:

    flex: Establece un contenedor como elemento flexible.


    inline-flex: Establece un contenedor como un elemento flexible en línea.

    flex-direction:

    row: Los elementos flexibles se colocan en línea en la misma dirección que el eje
    principal.
    row-reverse: Los elementos flexibles se colocan en línea en la dirección opuesta al
    eje principal.
    column: Los elementos flexibles se colocan en una columna en el mismo sentido que
    el eje principal.
    column-reverse: Los elementos flexibles se colocan en una columna en la dirección
    opuesta al eje principal.
    flex-wrap:

    nowrap: Todos los elementos flexibles se ajustan en una sola línea.


    wrap: Los elementos flexibles se ajustan en varias líneas según sea necesario.
    wrap-reverse: Los elementos flexibles se ajustan en varias líneas en sentido inverso.

    flex-flow: 

    Es una propiedad abreviada para establecer las propiedades "flex-direction" y "flex-


    wrap" en una sola declaración. Los valores permitidos son: "row", "row-reverse",
    "column", "column-reverse", "nowrap", "wrap", "wrap-reverse".
    justify-content:

    flex-start: Los elementos flexibles se alinean al comienzo del contenedor.


    flex-end: Los elementos flexibles se alinean al final del contenedor.
    center: Los elementos flexibles se centran dentro del contenedor.
    space-between: Los elementos flexibles se distribuyen de manera uniforme en el
    contenedor; el primer elemento se encuentra en el inicio del contenedor, mientras
    que el último elemento se encuentra en el final del contenedor.
    space-around: Los elementos flexibles se distribuyen de manera uniforme en el
    contenedor con espacios iguales entre ellos.

    align-items:

    flex-start: Los elementos flexibles se alinean en la parte superior del contenedor.


    flex-end: Los elementos flexibles se alinean en la parte inferior del contenedor.
    center: Los elementos flexibles se centran verticalmente dentro del contenedor.
    baseline: Los elementos flexibles se alinean según su línea de base.
    stretch: Los elementos flexibles se estiran para llenar todo el contenedor.

    align-content:

    flex-start: Los elementos flexibles se agrupan en la parte superior del contenedor.


    flex-end: Los elementos flexibles se agrupan en la parte inferior del contenedor.
    center: Los elementos flexibles se centran verticalmente dentro del contenedor.
    space-between: Los elementos flexibles se distribuyen de manera uniforme en el
    contenedor; el primer elemento se encuentra en la parte superior del contenedor,
    mientras que el último elemento se encuentra en la parte inferior del contenedor.
    space-around: Los elementos flexibles se distribuyen de manera uniforme en el
    contenedor con espacios iguales entre ellos.
    stretch: Los elementos flexibles se estiran para llenar todo el contenedor.
    space-evenly: las filas se distribuyen equitativamente con un espacio en blanco
    igual alrededor de ellas.
    align-self:

    Alinea un elemento flexible dentro de su contenedor flex en el eje perpendicular a la


    dirección principal. Los valores permitidos son los mismos que para "align-items".
    Esta propiedad anula cualquier valor definido por "align-items" en el contenedor flex.

    flex-basis: 

    Valor expresado en píxeles, porcentajes, em, rem, etc. Establece el tamaño base del
    elemento flexible.

    flex-grow: 

    Valor numérico que representa la proporción del espacio disponible que el elemento
    debe ocupar en relación con los demás elementos flexibles del mismo contenedor.
    flex-shrink: 

    Valor numérico que representa la proporción del espacio disponible que el elemento
    debe liberar en relación con los demás elementos flexibles del mismo contenedor.

    También podría gustarte