Twitter Facebook Google + RSS Feed

Tutorial para utilizar FlexBox en Css   (página 1 de 3)

0
CSS3Diseño

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

Flexbox es un sistema de disposición de elementos flexibles en donde los elementos se adaptan y colocan automáticamente y es más fácil personalizar los diseños y establecer los parámetros para la visualización de los mismos en responsive.

En este tutorial te enseñaremos como aplicar la disposición flex y todas sus variantes para poder lograr un diseño donde puedas establecer el orden de los elementos de tu sitio web.

Lo primero que debes saber son los elementos a tomar en cuenta para aplicar este método:

Contenedor: El elemento padre que es el contenedor que tendrá en su interior los items flexibles y adaptables.
Ítem: Son los hijos flexibles que se encontraran dentro del contenedor.
Eje principal: Los contenedores flexibles tendrán una orientación principal específica. Por defecto, es en horizontal (fila).
Eje transversal: De la misma forma, los contenedores flexibles tendrán una orientación secundaria, perpendicular a la principal. Si la principal es en horizontal, la secundaria será en vertical, y viceversa.

 

<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>
.container{
   display: flex;
   max-width: 800px;
   margin: 0 auto;
   border: 2px solid #000000;
}

.flex-child {
   font-size: 2.5rem;
   text-align: center;
   line-height: 132px;
   color: #FFFFFF;
   width: 100%;
}

Resultado:

Si añadimos 2 elementos mas se vería de esta manera:

Es decir los elementos se ajustan automáticamente al ancho del contenedor.

Dirección de los ejes:

Ahora te mostraremos como cambiar la disposición de los elementos y comportamiento de los items a lo largo del eje principal del contenedor utilizando la propiedad FLEX-DIRECTION.:

Flex-direction: row
Flex-direction: row-reverse
Flex-direction: column
Flex-direction: column-reverse

Flex-direction: row;

Esta es la disposición de los elementos por defecto.

Flex-direction: row-reverse;

Invierte el orden de los elementos.

flex-direction: column;

Dispone los elementos uno debajo del otro.

flex-direction: column-reverse

Dispone los elementos uno debajo del otro invirtiendo el orden.

Flex-Wrap

Si los elementos dentro del contenedor son mas anchos que el contenedor estos de ajustan automáticamente (solo aplica si el ancho combinado de todos los items son mayores que la del contenedor) esto generaría un contenedor de items multilinea.

Flex-wrap: wrap
Flex-wrap: wrap-reverse;
Flex-direction: column
Flex-direction: column-reverse

.container{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-start;
    max-width: 800px;
    margin: 0 auto;
    border: 2px dashed #505050;
}

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

flex-wrap: wrap;

Cuando el ancho de todos los items en total supera el ancho del contenedor, la propiedad flex-wrap: wrap dispondrá ajustara las columnas dentro del contenedor.

flex-wrap: wrap-reverse;

Esta propiedad invertirá el orden de cada linea de columnas que se formen.

0 comentarios »

Deja un comentario

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

Buscar