Flexibilidad a los items
flex-basisflex-growflex-shrinkflex

<< Alineación items Grid >>

Las siguientes propiedades dan flexibilidad a los elementos hijos de un contenedor declarado como flex. La propiedad flex-basis nos permite dar un tamaño base de los ítems. flex-grow nos permite indicar el factor de crecimiento del ítem (sino ocupa el 100% del elemento padre). flex-shrink nos permite indicar el factor de decrecimiento del ítem (si ocupa el 100% del elemento padre). Veamos en detalle cada uno.

flex-basis

Como hemos dicho, la propiedad flex-basis nos permite definir el tamaño por defecto que van a tener los ítems antes de distribuirlos. Podemos usar en lugar de un tamaño la palabra content que ajusta el tamaño de forma automática al contenido del elemento (valor por defecto). Ver ejemplo aquí.

.container{
    padding-top: 50px;
    background-color: aquamarine;
    display: flex;
    gap: 5px;
    
    justify-content: center;    
    align-items: center;       /* vertical */
    max-width: 1600px;
    min-height: 610px;

    & :where(.item){
        border: 6px solid green;
        background-color: greenyellow;
        width: 100px;
        height: 100px;
        /* flex-basis: content; */
        flex-basis: 50px;
    }
}

flex-grow

La propiedad flex-grow funciona si hay un flex-basis definido y los ítems cubren el tamaño total del contenedor flex padre. Nos permite indicar el factor de crecimiento de los ítems sino tienen un ancho/alto específico. Ver ejemplo aquí.

.container{
    padding-top: 50px;
    background-color: aquamarine;
    display: flex;
    gap: 5px;
    
    justify-content: center;    
    align-items: center;       /* vertical */
    max-width: 1600px;
    min-height: 610px;

    & :where(.item){
        border: 6px solid green;
        background-color: greenyellow;
        width: 100px;
        height: 100px;
        /* flex-basis: content; */
        flex-basis: 50px;
        &:nth-child(1){
            flex-grow: 2;
        }
        &:nth-child(2){
            flex-grow: 4;
        }
    }
}

flex-shrink

La propiedad flex-shrink es la opuesta a flex-grow ya que lo que hace es aplicar un factor de decrecimiento. Esta propiedad funciona si hay un flex-basis definido y los ítems no cubren el tamaño total del contenedor flex padre. Ver ejemplo aquí.

.container{
    padding-top: 50px;
    background-color: aquamarine;
    display: flex;
    gap: 5px;
    
    justify-content: center;    
    align-items: center;       /* vertical */
    max-width: 1600px;
    min-height: 610px;

    & :where(.item){
        border: 6px solid green;
        background-color: greenyellow;
        width: 100px;
        height: 100px;
        /* flex-basis: content; */
        flex-basis: 500px;
        &:nth-child(1){
            flex-shrink: 2;
        }
        &:nth-child(2){
            flex-shrink: 4;
        }
    }
}

flex

Como atajo de estas propiedades tenemos la propiedad flex que sirve de atajo para estas tres propiedades indicadas en los ítems. Si indicamos tres parámetros estaremos dando valor a: flex-grow flex-shrink flex-basis. Si en la propiedad flex indicamos sólo dos parámetros, le estaríamos dando valor a: flex-grow flex-shrink. Pero si la propiedad flex tiene un sólo parámetro, podemos usar none (sería como decir 0 0 auto), podemos hacer un flex-grow si lo que ponemos es un número o si ponemos un tamaño definiríamos la propiedad flex-basis. Ver ejemplo aquí.

<< Alineación items Grid >>