DesarrolloLibre

Desarrollo Web, Android, juegos y mucho más

22-09-2014

Con la propiedad FlexBox podemos hacer sitios completos adaptables o responsive de una manera muy fácil; los FlexBox pueden acomodarse a distintas resoluciones de pantallas; además poseen una serie de propiedades que ayudan al momento de adaptar los FlexBox a distintos dispositivos con ayuda de los Media Query; los FlexBox son una mejora considerable que evitan emplear propiedades como el float o el position en conjunto con otras cuando en verdad lo que simplemente se desea es construir cajas flexibles y fluidas con distintos tamaños y que sean adaptables facilmente a la resolución del dispositivo (entiéndase pc, teléfono, tablet entre otros):

La idea de tras los FlexBox

Siguiendo un poco la documentación oficial del MDN y resumiendo lo dicho anteriormente:

Lo que caracteriza un diseño flexible es su habilidad para alterar el ancho y alto de sus elementos para ajustarse lo mejor posible al espacio disponible en cualquier dispositivo. Un contenedor flexible expande sus elementos para rellenar el espacio libre, o los comprime para evitar que rebasen el área prevista.

Aunque los FlexBox van mucho más haya al momento de hacer una cajita flexible, fluida y adaptable, pero para esta entrega solo daremos los primeros pasos.

Iniciando con FlexBox; aprendiendo sobre la propiedad FlexBox con un ejemplo

display: flex

Básicamente consiste en declarar un contenedor (section, nav, div, etc) y definir que el contenedor es "flexible" con la regla display: flex; o display: inline-flex;

A partir de de la declaración display: flex; o display: inline-flex; el contenedor padre será un contenedor flexible; todos sus hijos se convertirán en "bloques" una vez definamos las siguientes propiedades:

Orientación: flex-direction

Indicamos cómo deseamos que se alinean los elementos hijos:

  • flex-direction: row Se alinean en filas: flexbox row
  • flex-direction: row-reverse Se alinean en filas, pero en orden inverso: flexbox row reverse
  • flex-direction: column Se alinean en columnas: flexbox column
  • flex-direction: column-reverse Se alinean en columnas, pero en orden inverso: flexbox column reverse

Orientación: Múltiples líneas o una sola línea con flex-wrap

Indicamos cuantas lineas tiene el contenedor flexible:

  • flex-wrap: nowrap El contenedor consta de una sola línea.
  • flex-wrap: wrap El contenedor consta de múltiples líneas.
  • flex-wrap: wrap-reverse El contenedor consta de múltiples líneas colocadas de manera inversa.

Orientación: flex-flow = flex-direction + flex-wrap

También podemos combinar las dos propiedades anteriores en una sola:

flex-flow: <flex-direction> <flex-wrap>
flex-flow: row wrap;

Flexibilidad: flex

Con esta propiedad colocada a los elementos hijos, podemos indicar como crece un elemento con respecto a los demás dentro de su contenedor; si tenemos la siguiente jerarquía:

<section>
<div>
<h1>1</h1>
<p>Con la propiedad FlexBox podemos hacer sitios completos adaptables o ...</p>
<div>
<h1>2</h1>
<p>Con la propiedad FlexBox podemos hacer sitios completos adaptables o ...</p>
<div>
<h1>3</h1>
<p>Con la propiedad FlexBox podemos hacer sitios completos adaptables o ...</p>
</section>

Definimos las siguientes reglas con CSS

Todos tendrán en mismo tamaño:

section div:nth-child(1) { 
	flex: 1;
}
section div:nth-child(2) { 
	flex: 1;
}
section div:nth-child(3) { 
	flex: 1;
}
flexbox row

Si queremos que el div dos ocupe el doble que sus hermanos:

section div:nth-child(1) { 
	flex: 1;
}
section div:nth-child(2) { 
	flex: 2;
}
section div:nth-child(3) { 
	flex: 1;
}
flexbox row double

Si queremos que el div dos ocupe el doble que sus hermanos y el uno el triple:

section div:nth-child(1) { 
	flex: 1;
}
section div:nth-child(2) { 
	flex: 1;
}
section div:nth-child(3) { 
	flex: 3;
}
flexbox row triple

Consideraciones en el uso de las FlexBox

  • Emplear las propiedades min-width y min-height establecidas en auto garantiza que el elemento a mostrar sea lo suficientemente grande para que se vea su contenido.
  • Utilizarlos cuando quieras mostrar elementos que se adapten al espacio disponible.

Resultado Final de nuestro ejemplo

Clic aquí para ver el ejemplo final del FlexBox en una ventana aparte.


Publicidad

Give me for a beer!

Algunos recursos que te pueden interesar

Animación Torus solo con HTML y CSS

Animación Torus solo con HTML y CSS

Corazón con CSS

Corazón con CSS

Rainbow tiles con solo CSS

Rainbow tiles con solo CSS

Algunos artículos que te pueden interesar

Construyendo nuestro propio logo Android con SVG en HTML

Construyendo nuestro propio logo Android con SVG en HTML

En esta entrada abordaremos un tema un poco más práctico y veremos cómo construir nuestro propio logo de Android empleando lo hablado hasta el momento.

Andrés Cruz 21-05-2015

Uso de cursores con CSS

Uso de cursores con CSS

Con la propiedad cursor que veremos a continuación podemos cambiar el aspecto del cursor sobre ciertos elementos en nuestra web.

Andrés Cruz 22-08-2013

Detectando la Orientación de un dispositivo con jQuery Mobile

Detectando la Orientación de un dispositivo con jQuery Mobile

En esta entrega veremos como podemos detectar o capturar la rotación de un dispositivo con jQuery Mobile.

Andrés Cruz 17-07-2014