Flexbox (Diseño de Caja Flexibles) nos permite crear páginas web responsivas y adaptables mediante el uso de CSS3. Si no sabes que es, ni como usarlo, no te pierdas este tutorial para aprender a usarlo en tan solo 15 minutos.

Si ya tienes conocimientos de HTML y CSS3 habrás oído y usado la propiedad float para desplazar contenedores. Pues bien con Flexbox podremos prescindir de usar float para posicionar nuestros elementos a izquierda o derecha, ya que, con Flexbox podremos posicionar y distribuir los elementos a nuestro antojo.




El modelo Flexbox tiene un contenedor padre (Flex-container) que contiene los elementos flexibles. Y un contenedor hijo (Flex-Items) que son los elementos que se encuentran dentro del contenedor padre.

 

Empezando con CSS Flexbox

Flexbox

Para iniciar nuestro modelo utilizaremos la propiedad  display con valor flex, que establece un contenedor de ítems flexible en bloque, similar a block de CSS o inline-flex que es similar o equivalente al inline-block de CSS .

Para que podáis entenerlo mejor, os voy a mostrar un ejemplo, en el que crearemos  un div padre cuya clase es contenedor y varios hijos cuyas clases son elemento:

Además, crearemos nuestra hoja de estilos CSS con las siguientes propiedades para iniciar nuestro modelo Flexbox y añadirles un estilo básico:

Propiedades para el Contenedor Padre (Flex-Container)

Los Flex-Container o contenedores Padre tienen las siguientes propiedades:

  • Flex-direction
  • Flex-Wrap
  • Flex-flow
  • justify-content
  • align-items
  • align-content




 

Flex-direction

Esta propiedad nos permite establecer la dirección en la que se acomodaran nuestros elemento, es decir, modificamos la dirección del eje principal del contenedor para que se oriente en horizontal, por defecto, o en vertical.

Row: Es el valor por defecto. Alinea los elementos en fila a lo largo del eje principal en horizontal.

Column: Establece la dirección del eje principal en vertical, es decir, de arriba a abajo.

Row-reverse: Igual que ROW, pero en sentido inverso, es decir, de derecha a izquierda.

Column-reverse: Alinea en columna de arriba a abajo, pero en orden inverso a column.

Flex-Wrap

Evita o permite el desbordamiento (multilinea). Gracias a esta propiedad podremos indicar si todos los elementos estarán en línea con su máximo ancho posible o establecido o si queremos que respete el ancho y los elementos se posicionen en varias lineas de elementos.

 

Flex Flow

Es un atajo entre flex-direction y flex-wrap.

Justify Content

Nos permite colocar los elementos de un contenedor mediante una disposición concreta a lo largo del eje principal:

Aquí os dejo un esquema para que podáis entenderlo gráficamente:

FlexBox

Align Items (Elementos)

Se encarga de alinear los ítems en el eje secundario del contenedor, pero no debemos de confundirlo con align-content, ya que align-items actua sobre la línea actual, y no sobre cada una de las líneas de un contenedor multilínea.

Esquema gráfico para entender el funcionamiento de align-items

FlexBox

  • Flex-start: Posiciona los elementos desde el inicio del contenedor, es decir, a lo largo del eje transversal.
  • Flex-end: Los posiciona al final del contenedor, a lo largo del eje transversal.
  • Stretch: Valor por defecto. Extiende los elementos desde el principio hasta el final a lo largo del eje transversal.
  • Center: Centra los elementos a lo largo del eje.
  • Baseline: Aparentemente, la baseline se parece a flex-start, pero con la diferencia de que la línea que posiciona los elementos es la primera línea de texto del primer elemento. Para que se note la diferencia, hemos aumentado el tamaño de la fuente del primer elemento.




 

Align Content

Nos permite posicionar o distribuir elementos verticalmente, igual que align-items, solo que align-content solo funciona para lineas de elementos, por ejemplo cuando tenemos establecido un flex-wrap:wrap; y los elementos se posicionan en varias lineas.

  • Flex-start: Aliena los elementos a lo largo del inicio del eje transversal.
  • Flex-end: Alinea los elementos a lo largo del extremo del eje transversal.
  • Center: Los alinea en el centro del eje.
  • Stretch: Valor por defecto. Estira los elementos a lo largo del eje transversal de principio a fin.

Esquema del funcionamiento de align-content

Flexbox

 

Propiedades para los elementos hijos (Flex-Items)

Ahora nos referimos a los Flex-items, que son los que se encuentran dentro del contenedor. En primer lugar, las propiedades de estos elementos son: Order || Flex-grow || Flex-shrink || Flex-basis.

 

Cómo crear un efecto LightBox solo con CSS3

 

Order

Establecemos el orden que tendrá un elemento a comparación con otros elementos.

Flex Grow

Establecemos la proporción de crecimiento que tendrá un elemento a comparacion con los demás.

Flex Shrink

Número que indica el decrecimiento del ítem respecto al resto.

Flex Basis

Establecemos el tamaño que tendrá un elemento.

Bonus

Para finalizar, os recomiendo que visitéis la web Flexbox Froggy que os permitirá poner en práctica todo lo aprendido.

Déjanos tus likes, comentarios y estrellas para seguir creciendo. ¡Gracias!

 

 

Calificación de Lectores
[Total: 1 Media: 4]

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

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

Usamos cookies para personalizar su experiencia. Si sigue navegando estará aceptando su uso. Más Información | Cerrar