Twitter Facebook RSS Feed

jueves, 24 de enero de 2019 a las 10:16hs por Valentina Echezuria

ALIGN-CONTENT

Este nos servirá cuando estemos tratando con un contenedor flex multilinea, que es un contenedor en el que los items no caben en el ancho disponible, y por lo tanto, el eje principal se divide en múltiples líneas y solo servirá en este caso.

De esta forma, align-content servirá para alinear cada una de las líneas del contenedor multilinea. Los valores que puede tomar son los siguientes:

align-content: stretch;

Alineación por defecto.

.container{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    align-content: stretch;
    max-width: 800px;
    height: 400px;
    margin: 0 auto;
    border: 2px dashed #505050;
}

.flex-child {
    padding: 0 2rem;
    font-size: 40px;
    text-align: center;
    line-height: 132px;
    color: #FFFFFF;
    width: 25%;
}

align-content: center;

Alineación en el centro del contenedor.

align-content: flex-start;

Alineación del contenido multilinea en el tope del contenedor.

align-content: space-around;

Alinea los items en el centro del contenedor dejando un espacio separador entre cada linea de columnas.

align-content: space-between;

Alinea los items de manera que cada las lineas de columnas quedan ocupando alto del contenedor
dejando un espacio separador en el medio de estas.

Orden de los elementos

Una de las propiedades para lo hijos del contenedor que utiliza flex box es order que permite establecer el orden
de cada uno de los items solamente desde el codigo css. De esta forma podemos recolocar fácilmente los items incluso utilizando media queries o responsive design.

<div class="container">
     <div class="flex-child" style="background-color: #b2ebf2;">1</div>
     <div class="flex-child" style="background-color: #80deea;">2</div>
     <div class="flex-child" style="background-color: #4dd0e1;">3</div>
     <div class="flex-child" style="background-color: #26c6da;">4</div>
</div>
.container > div:nth-child(1) {
    order: 3;
}

.container > div:nth-child(2) {
    order: 0;  
}

.container > div:nth-child(3) {
    order: 1;
}

.container > div:nth-child(4) {
    order: 2;
}

Como resultado obtendremos:

En el código html podemos ver que el orden de items iba desde el numero 1 al 4 de manera continua, con la propiedad order pudimos establecer el orden que deseábamos que tuvieran los elementos.

Flexgrow

Con esta propiedad podemos establecer el factor de crecimiento de los items en el caso de que no tengan un ancho específico para llenar el espacio disponible, por ejemplo si le establecemos a todos los elementos un valor de flex-grow: 1; todos tendrán un mismo ancho, pero si a uno de ellos le ponemos el valor de flex-grow: 2; este sera mas ancho que los demás. Los elementos a los que no se les especifique tendrán por defecto el valor de 0.

Esta propiedad solo se aplica si el espacio disponible es positivo (el tamaño del contenedor es mayor a la suma de los flex-items y sus márgenes).

<div class="container">
     <div class="flex-child" style="background-color: #b2ebf2;">1</div>
     <div class="flex-child" style="background-color: #80deea;">2</div>
     <div class="flex-child" style="background-color: #4dd0e1;">3</div>
     <div class="flex-child" style="background-color: #26c6da;">4</div>
</div>
.container > div:nth-child(1) {
    flex-grow: 0;
}

.container > div:nth-child(2) {
    flex-grow: 2;
}

.container > div:nth-child(3) {
    flex-grow: 1;
}

.container > div:nth-child(4) {
    flex-grow: 3;
}

Flex-shrink

Al contrario de flex-grow sirve para establecer el valor de decrecimiento de los items en caso de que estos superen el ancho del contenedor. En este caso mientras mas alto sea el valor de flex-shrink el tamaño del elemento sera menor

Esta propiedad solo se aplica si el espacio disponible es negativo (el tamaño del contenedor es menor a la suma de los flex-items y sus márgenes).

<div class="container">
     <div class="flex-child" style="background-color: #b2ebf2;">1</div>
     <div class="flex-child" style="background-color: #80deea;">2</div>
     <div class="flex-child" style="background-color: #4dd0e1;">3</div>
     <div class="flex-child" style="background-color: #26c6da;">4</div>
     <div class="flex-child" style="background-color: #00bcd4;">5</div>
     <div class="flex-child" style="background-color: #00acc1;">6</div>
     <div class="flex-child" style="background-color: #0097a7;">7</div>
     <div class="flex-child" style="background-color: #00838f;">8</div>
</div>

.contain {
    display: flex;
    max-width: 600px;
    margin: 0 auto;
    border: 2px dashed #505050;
}

.flex-child {
    padding: 0 0rem;
    font-size: 40px;
    text-align: center;
    line-height: 132px;
    color: #FFFFFF;
    width: 25%;
}

.container > div:nth-child(1) {
    flex-shrink: 3;
}

.container > div:nth-child(2) {
    flex-shrink: 1;
}

.container > div:nth-child(3) {
    flex-shrink: 3;
}

.container > div:nth-child(4) {
    flex-shrink: 4;
}

.container > div:nth-child(5) {
    flex-shrink: 1;
}

.container > div:nth-child(6) {
    flex-shrink: 4;
}

.container > div:nth-child(7) {
    flex-shrink: 3;
}

.container > div:nth-child(8) {
    flex-shrink: 4;
}

Resultado:

Flex-basis

Con esta podemos definir el tamaño por defecto (de base) que tendrán los items antes de aplicarle la distribución de espacio. Generalmente, se aplica un tamaño (unidades, porcentajes, etc…), pero también se puede establecer la palabra clave content que ajusta automáticamente el tamaño al contenido del ítem, que es su valor por defecto.

Atajo: propiedades de los items

Existe una propiedad denominada flex que sirve de atajo para establecer estas tres propiedades de los items hijos . Funciona asi:

.flex-child {
  /* flex: <flex-grow> <flex-shrink> <flex-basis> */
  flex: 1 3 35%;
}

Compatibilidad con Browsers

A través de este link podrán detallar la compatibilidad de esta propiedad en todos los exploradores

0 comentarios »

Deja un comentario

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.