Define un contenedor flexible

Flexbox necesita un padre y por lo menos un hijo.

<style>
#padre{
    width:250px;
    height:150px;
    border:1px solid #000;
    margin:0 auto;
    background:#FFF;
}
.Hijo1{background:#B9E4F7}
.Hijo2{background:#C3F7BF}
.Hijo3{background:#FBC1F7}
</style>

<div id="padre">
    <div class="Hijo1">Hijo 1</div>
    <div class="Hijo2">Hijo 2</div>
    <div class="Hijo3">Hijo 3</div>
</div>

Lo primero es aplicarle a la etiqueta padre la propiedad display:flex

El ancho de los hijos depende del contenido y el alto de los hijos será igual a la altura del contenedor

<style>
#padre{
    width:250px;
    height:150px;
    border:1px solid #000;
    margin:0 auto;
    background:#FFF;
    display:flex;
}
.Hijo1{background:#B9E4F7}
.Hijo2{background:#C3F7BF}
.Hijo3{background:#FBC1F7}
</style>

<div id="padre">
    <div class="Hijo1">Hijo 1</div>
    <div class="Hijo2">Hijo 2</div>
    <div class="Hijo3">Hijo 3</div>
</div>

Ver ejemplo en acción . . .

Ver ejemplo en acción . . .

Seleccione entre las opciones flex ó inline-flex, para ver su comportamiento.

<div class="flex-container">
    <div class="flex-item">1</div>
    <div class="flex-item">2</div>
    <div class="flex-item">3</div>
    <div class="flex-item">4</div>
    <div class="flex-item">5</div>
    <div class="flex-item">6</div>
    <div class="flex-item">7</div>
    <div class="flex-item">8</div>
    <div class="flex-item">9</div>
</div>

.flex-container {
    display: 
        block
        flex
        inline-flex
    
    background-color: #2196F3;
    padding: 10px;
}
.flex-item {
    background-color: rgba(255, 255, 255, 0.8);
    border: 1px solid rgba(0, 0, 0, 0.8);
    padding: 20px;
    font-size: 30px;
    text-align: center;
}

Determina si los items se ajustan en una línea o no

Podemos permitir el salto de columnas con Flex-Wrap. Cuando los hijos no tengan espacio dentro del contenedor salten a la siguiente fila.

Sintaxis: flex-wrap: nowrap | wrap | wrap-reverse | initial | inherit;

.container{
    /* Define un contenedor flexible */
    display: flex;
    /* Determina si los items se ajustan en una línea o no */
    flex-wrap: nowrap | wrap | wrap-reverse;
}

Sus valores son:

• nowrap: Por defecto no saltan.
• wrap: Saltan a la siguiente línea los hijos que no caben.
• wrap-reverse: Invierte el salto a la línea superior.
• initial: Establece esta propiedad a su valor predeterminado.
• inherit: Hereda esta propiedad de su elemento padre.

<div class="container">
    <div>01</div>
    <div>02</div>
    <div>03</div>
    <div>04</div>
    <div>05</div>
    <div>06</div>
    <div>07</div>
    <div>08</div>
    <div>09</div>
    <div>10</div>
</div>

.container {
    display: flex;
    flex-wrap: 
            nowrap
            wrap
            wrap-reverse
        ;
    height:120px;
    width:320px;
}
.container div{
    height:40px;
    width:80px;
}

Dirección de los items en fila o columna.

Sintaxis: flex-direction: row | row-reverse | column | column-reverse | initial | inherit;

.container{
    /* Define un contenedor flexible */
    display: flex;
    /* Los items se ajustan en una línea */
    flex-wrap: wrap;
    /* Dirección de los items en fila o columna */
    flex-direction: row (Por defecto) | row-reverse | column | column-reverse;
}

Podemos modificar el eje principal con la propiedad flex-direction. Flex-direction cambia la dirección del eje principal con los siguientes valores:

• row: Por defecto el eje principal del padre es horizontal.
• row-reverse: Invierte el orden de los hijos en el eje principal del padre es horizontal.
• column: El eje principal del padre es ahora vertical.
• column-reverse: Invierte el orden de los hijos en el eje principal del padre es vertical.
• initial: Establece esta propiedad a su valor predeterminado.
• inherit: Hereda esta propiedad de su elemento padre.

<div class="container">
    <div>01</div>
    <div>02</div>
    <div>03</div>
    <div>04</div>
    <div>05</div>
    <div>06</div>
    <div>07</div>
    <div>08</div>
    <div>09</div>
    <div>10</div>
</div>

.container {
    display: flex;
    flex-wrap: wrap;
    flex-direction: 
            row
            row-reverse
            column
            column-reverse
        ;
    height:120px;
    width:320px;
}
.container div{
    height:40px;
    width:80px;
}

Alineación horizontal de los items.

Justtify-content alinea los elementos del contenedor flexible cuando los elementos no utilizan todo el espacio disponible en el eje principal (horizontalmente).

Sugerencia: Utilice la propiedad align-items para alinear los elementos en el eje transversal (verticalmente).

Sintaxis: justify-content: flex-start | flex-end | center | space-between | space-around | initial | inherit;

.container{
    /* Define un contenedor flexible */
    display: flex;
    /* Alineación horizontal de los items */
    justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly;
}

Sus valores son:

• flex-start: Su valor por defecto, el cual alinea los hijos a la izquierda del contenedor.
• flex-end: Alinea los hijos a la derecha del contenedor.
• center: Los hijos se colocan en el centro del contenedor.
• space-between: Podemos distribuir los elementos de forma proporcional. Coloca el primer hijo al comienzo de la caja padre y el ultimo hijo al final de la caja.
• space-around: Podemos distribuirlos los hijos similar a space-between, con la diferencia que crea un espacio delante y al final de cada hijo.
• initial: Establece esta propiedad a su valor predeterminado.
• inherit: Hereda esta propiedad de su elemento padre.

<div class="container">
    <div>01</div>
    <div>02</div>
    <div>03</div>
</div>

.container {
    display: flex;
    justify-content: 
            flex-start
            flex-end
            center
            space-between
            space-around
            space-evenly
        ;
    height:120px;
    width:320px;
}
.container div{
    height:40px;
    width:80px;
}

Alinea los items en sentido horizontal y vertical.

La propiedad align-content modifica el comportamiento de la propiedad flex-wrap. Es similar a align-items, pero en lugar de alinear los elementos flexibles, alinea las líneas flexibles.

Nota: Debe haber varias líneas de elementos para que esta propiedad tenga algún efecto.

Consejo: Use la propiedad justify-content para alinear los elementos en el eje principal (horizontalmente).

Valor por defecto: stretch

Sintaxis de JavaScript: object.style.alignContent="center"

Sintaxis: align-content: stretch|center|flex-start|flex-end|space-between|space-around|initial|inherit;

.container{
    /* Define un contenedor flexible */
    display: flex;
    /* Alinea los items en sentido horizontal y vertical */
    align-content: flex-start | flex-end | center | space-between | space-around | stretch;
}

Valores de propiedad:

• stretch: Valor por defecto. Las líneas se estiran para ocupar el espacio restante
• center: Las líneas se empaquetan hacia el centro del contenedor flexible
• flex-start: Las líneas se empaquetan hacia el inicio del contenedor flexible
• flex-end: Las líneas se empaquetan hacia el final del contenedor flexible
• space-between: Las líneas se distribuyen uniformemente en el contenedor flexible
• space-around: Las líneas se distribuyen uniformemente en el contenedor flexible, con espacios de tamaño medio en cada extremo
• initial: Establece esta propiedad en su valor predeterminado.
• inherit: Hereda esta propiedad de su elemento padre.

<div class="container">
    <div> </div>
    <div> </div>
    <div> </div>
    <div> </div>
    <div> </div>
    <div> </div>
</div>

.container {
    display: flex;
    flex-wrap: wrap;
    align-content: 
            stretch    
            flex-start
            flex-end
            center
            space-between
            space-around
        ;
    height:200px;
    width:90%;
}
.container div{
    margin:2px 5px;
}

Alineación vertical de los items.

Consejo: Use la propiedad align-self de cada elemento para anular la propiedad align-items.

Valor por defecto: stretch

Sintaxis de JavaScript: object.style.alignItems="center"

Sintaxis: align-items: stretch | center | flex-start | flex-end | baseline | initial | inherit;

.container{
    /* Define un contenedor flexible */
    display: flex;
    /* Alineación vertical de los items */
    align-items: flex-start | flex-end | center | stretch | baseline;
}

Sus valores son:

• stretch: Por defecto. Los artículos se estiran para caber en el contenedor
• center: Los artículos se colocan en el centro del contenedor.
• flex-start: Los artículos se colocan al comienzo del contenedor
• flex-end: Los artículos se colocan al final del contenedor
• baseline: Los artículos se colocan en la línea de base del contenedor.
• initial: Establece esta propiedad en su valor predeterminado.
• inherit: Hereda esta propiedad de su elemento padre.

<div class="container">
    <div>1 2</div>
    <div>3 4 5</div>
    <div>6 7 8 9 0</div>
    <div>3 4 5</div>
    <div>1 2</div>
    <div>6 7 8 9 0</div>
</div>

.container {
    display: flex;
    align-items: 
            stretch    
            flex-start
            flex-end
            center
            baseline
        ;
    height:120px;
    width:320px;
}
.container div{
    width:80px;
}

Permite alinear de forma individual un elemento.

La propiedad align-self especifica la alineación del elemento seleccionado dentro del contenedor flexible.

Nota: La propiedad align-self anula la propiedad align-items del contenedor flexible.

Valor por defecto: auto

Sintaxis de JavaScript: object.style.alignSelf="center"

Sintaxis: align-self: auto|stretch|center|flex-start|flex-end|baseline|initial|inherit;

.item:nth-child(3) {
    align-self: auto | flex-start | flex-end | center | baseline | stretch;
}

Valores de propiedad:

• auto: Defecto. El elemento hereda la propiedad align-items del contenedor principal o "stretch" si no tiene contenedor principal
• stretch: El elemento está colocado para encajar en el contenedor.
• center: El elemento se coloca en el centro del contenedor.
• flex-start: El elemento se coloca al principio del contenedor.
• flex-end: El elemento se coloca al final del contenedor.
• baseline: El elemento se coloca en la línea de base del contenedor.
• initial: Establece esta propiedad en su valor predeterminado.
• inherit: Hereda esta propiedad de su elemento padre.

<section id="padre">
    <article class="Hijo1">Hijo 1</article>
    <article class="Hijo2">Hijo 2</article>
    <article class="Hijo3">Hijo 3</article>
</section>

#padre{
    height: 150px;
    display: flex;
    justify-content: center;
    align-items:center;
}
.Hijo1 {
    background: #B9E4F7;
    align-self: 
            auto
            stretch
            center
            flex-start
            flex-end
            baseline
            initial
        
}
.Hijo2 {background: #C3F7BF}
.Hijo3 {background: #FBC1F7}

Permite colocar un elemento en un orden diferente al que le corresponde.

Podemos reordenar los hijos flexibles con la propiedad order. En los diseños responsive, nos facilita cambiar el orden de los elementos utilizando solo CSS sin tocar el código fuente.

Sintaxis: order: número | initial | inherit;

.item {
    /* Orden del items */
    order: 5; /* por defecto es 0*/
}

• Su valor por defecto es 0 (cero)
• El orden de los elementos va de menor a mayor (-1, 0, 1, 2)
• Invirtiendo el orden (4, 3, 2, 1)

<div id="padre">
    <div class="Hijo1">Hijo 1</div>
    <div class="Hijo2">Hijo 2</div>
    <div class="Hijo3">Hijo 3</div>
    <div class="Hijo4">Hijo 4</div>
</div>

#padre { height:150px; display:flex; }
.Hijo1 { background: #6B6969;
        order: 
        0
        1
        2
        3
        4
    ;}
.Hijo2 { background: #7F2324;
        order: 
        0
        1
        2
        3
        4
        -1
    ;}
.Hijo3 { background: #7557BF;
        order: 
        0
        1
        2
        3
        4
        -1
    ;}
.Hijo4 { background: #3EA23A;
        order: 
        0
        1
        2
        3
        4
        -1
    ;}

Define en qué proporción crece un ítem.

Define el tamaño que crecerá un hijo, en relación a sus demás hermanos, solo cuando hay espacio disponible en el contenedor, su valor por defecto es 0 (cero).

Sintaxis: flex-grow: número | initial | inherit;

.item:nth-child(4) {
    /* Define en qué proporción crece un ítem */
    flex-grow: 3; /* Por defecto es 0 */
}

Valores de propiedad:

• número: Un número que especifica cuánto crecerá el artículo en relación con el resto de los elementos flexibles. El valor predeterminado es 0.
• initial: Establece esta propiedad a su valor predeterminado.
• inherit: Hereda esta propiedad de su elemento padre.

Ejemplos:

1. Si le asignamos al Hijo-1 el valor 1 (uno) a flex-grow, este ocupa todo el espacio disponible de la caja. Siempre y cuando los otros hijos tengan valor 0 (cero).
2. Si le asignamos al Hijo-2 el valor 2 (dos) en flex-grow y los otros tienen valor 1 (uno). El Hijo-2 ocupara el 50% del espacio disponible, el Hijo-1 e Hijo-3, ocuparan el 25%.

<div class="padre">
    <div class="Hijo1">Hijo 1</div>
    <div class="Hijo2">Hijo 2</div>
    <div class="Hijo3">Hijo 3</div>
</div>

.padre { height:150px; display:flex; }
.Hijo1 { background: #B9E4F7;
    flex-grow: 
        0
        1
        2
; }
.Hijo2 { background:#C3F7BF;
    flex-grow: 
        0
        1
        2
; }
.Hijo3 { background:#FBC1F7;
    flex-grow: 
        0
        1
        2
; }

Define la capacidad de un objeto flexible para contraerse si es necesario.

Define el tamaño que reducirá un hijo, en relación a sus demás hermanos, solo cuando falta espacio disponible en el contenedor, su valor por defecto es 1 (uno). Reduciendo los hijos proporcionalmente.

Esta es una propiedad hasta ahora sin uso en la web.

Sintaxis: flex-shrink: número | initial | inherit;

.item {
    /* Define la capacidad de un objeto flexible para contraerse si es necesario */
    flex-shrink: 2; /* Por defecto es 1 */
}

Valores de propiedad:

• número: Un número que especifica cuánto se reducirá el artículo en relación con el resto de los elementos flexibles. El valor predeterminado es 1.
• initial: Establece esta propiedad a su valor predeterminado.
• inherit: Hereda esta propiedad de su elemento padre.

Como ejemplo reducimos el espacio de la caja padre a 400 píxeles, le damos un padding de 10 píxeles y agregamos un hijo más para mejor visualización. Podemos observar que los hijos se ajustan todo lo que pueden.

Cuando tenemos varios hijos y la caja contenedora es muy pequeña, flex-shrink va ha determinar como se encogerán los hijos, podemos hacer que uno de los hijos se encoja mas que los otros. El valor 0 (cero), le indica a flex-shrink que no encoja.

<div class="padre">
    <div class="Hijo1">Hijo 1</div>
    <div class="Hijo2">Hijo 2</div>
    <div class="Hijo3">Hijo 3</div>
    <div class="Hijo4">Hijo 4</div>
</div>

.padre { display:flex; height:150px; width:400px; padding:10px; }
.Hijo1 { background: #B9E4F7;
    flex-shrink: 
        1
        0
        2
        3
        6
; }
.Hijo2 { background: #C3F7BF;
    flex-shrink: 
        1
        0
        2
        3
        6
; }
.Hijo3 { background: #FBC1F7;
    flex-shrink: 
        1
        0
        2
        3
        6
; }
.Hijo4 { background: #F5F59D;
    flex-shrink: 
        1
        0
        2
        3
        6
; }

Define el tamaño de un ítem antes de distribuir el espacio restante.

Define el tamaño inicial del hijo. Su valor por defecto es auto. Si el valor de flex-basis es igual a 0 (cero) en todos los hijos, esto hace que el espacio ocupado por ello es igual a cero, lo que permite que el el espacio disponible es el 100%, por lo tanto sera repartido en partes iguales, logrando que todos tengan la misma dimensión.

Si aplicamos la propiedad flex-Grow con el valor 1 (uno) a todos los hijos, el espacio disponible se repartirá entre ellos en proporciones iguales.

Para que todos los hijos tengan la misma dimensión y ocupen todo el espacio disponible a pesar de que su contenido sea distinto, nos valemos de la propiedad flex-basis con valor 0 (cero).

Sintaxis: flex-basis: number | auto | initial | inherit;

.item {
    /* Define el tamaño de un ítem antes de distribuir el espacio restante */
    flex-basis: auto | 10% | 5rem;
}

Valores de propiedad:

• número: Una unidad de longitud, o porcentaje, que especifica la longitud inicial de los elementos flexibles.
• auto: Valor por defecto. La longitud es igual a la longitud del artículo flexible. Si el artículo no tiene longitud especificada, la longitud será de acuerdo a su contenido.
• initial: Establece esta propiedad a su valor predeterminado.
• inherit: Hereda esta propiedad de su elemento padre.

<div class="padre">
    <div class="Hijo1">Hijo 1</div>
    <div class="Hijo2">Hijo 2</div>
    <div class="Hijo3">Hijo 3</div>
</div>

.padre { display:flex; height:150px; width:400px; padding:10px; }
.Hijo1 { background: #B9E4F7;
    flex-grow: 1;
    flex-basis: 
    auto
    0
    80px
    200px
; }
.Hijo2 { background: #C3F7BF;
    flex-grow: 1;
    flex-basis: 
    auto
    0
    80px
    200px
; }
.Hijo3 { background: #FBC1F7;
    flex-grow: 1;
    flex-basis: 
    auto
    0
    80px
    200px
; }

Propiedad abreviada de flex-direction + flex-wrap

La propiedad de flex-flow es una propiedad abreviada para las propiedades de flex-direction y flex-wrap.

• La propiedad flex-direction especifica la dirección de los elementos flexibles.
• La propiedad flex-wrap especifica si los elementos flexibles deben envolverse o no.

Nota: Si los elementos no son elementos flexibles, la propiedad de flujo flexible no tiene efecto.

Sintaxis: flex-flow: flex-direction flex-wrap | initial | inherit;

.container {
    /* Shorthand */
    flex-flow: row (flex-direction) wrap (flex-wrap)
}

<div class="padre">
    <div class="Hijo1">A</div>
    <div class="Hijo2">B</div>
    <div class="Hijo3">C</div>
    <div class="Hijo4">D</div>
    <div class="Hijo5">E</div>
    <div class="Hijo6">F</div>
</div>

.padre {
    height:150px;width:250px;
    display: flex;
    flex-flow: 
        row nowrap
        row-reverse nowrap
        column nowrap
        column-reverse nowrap
        row wrap
        row-reverse wrap
        column wrap
        column-reverse wrap
        row wrap-reverse
        row-reverse wrap-reverse
        column wrap-reverse
        column-reverse wrap-reverse
    ;
}
.padre div{height:50px;width:50px;}
.Hijo1{background-color:coral}
.Hijo2{background-color:lightblue}
.Hijo3{background-color:khaki}
.Hijo4{background-color:pink}
.Hijo5{background-color:lightgrey}
.Hijo6{background-color:lightgreen}

Especifica la longitud del elemento.

Podemos resumir todo con la propiedad flex

La propiedad flex especifica la longitud del elemento, en relación con el resto de los elementos flexibles dentro del mismo contenedor.

La propiedad flex es una abreviatura para las propiedades flex-grow, flex-shrink y flex-basis.

Nota: Si el elemento no es un elemento flexible, la propiedad flex no tiene ningún efecto.

Sintaxis: flex: flex-grow flex-shrink flex-basis | auto | initial | inherit;

Ejemplo: Utilizando los tres valores de flex: 1 1 100px;

Podemos utilizar solo dos valores de flex: 1 0px;. En este caso el primer valor corresponde a flex-grow y el segundo valor corresponde a flex-basis

Valores de propiedad:

• flex-grow: Un número que especifica cuánto crecerá el elemento en relación con el resto de los elementos flexibles.
• flex-shrink: Un número que especifica cuánto se reducirá el artículo en relación con el resto de los elementos flexibles.
• flex-basis: La longitud del artículo. Valores legales: "auto", "heredar" o un número seguido de "%", "px", "em" o cualquier otra unidad de longitud.
• auto: Igual que 1 1 auto.
• initial: Igual que 0 1 auto.
• inherit: Hereda esta propiedad de su elemento padre.

<div class="padre">
    <div class="Hijo1">Hijo 1</div>
    <div class="Hijo2">Hijo 2</div>
    <div class="Hijo3">Hijo 3</div>
</div>

.padre { display:flex; height:150px; width:400px; padding:10px; }
.Hijo1 { background: #B9E4F7;
    flex: 
    0 1 auto
    1 1 0px
    1 0px
; }
.Hijo2 { background: #C3F7BF;
    flex: 
    0 1 auto
    1 1 0px
    1 0px
; }
.Hijo3 { background: #FBC1F7;
    flex: 
    0 1 auto
    1 1 0px
    1 0px
; }