Primeros pasos con flexbox

Contenedores y artículos Flexbox

Flexbox o caja flexible es un método de diseño para organizar el contenido de una página de manera predecible. Flexbox proporciona una mejora con respecto al posicionamiento del modelo de bloques tradicional mediante el uso de flotadores o incluso un posicionamiento similar a una tabla para el contenido de la página.

En esencia, Flexbox se puede dividir en un elemento principal (contenedor flexible) y un elemento secundario (elemento flexible).

Contenedor flexible

Se puede crear un contenedor flexible configurando su propiedad de visualización en flex:

.container {
  display: flex;
}

Artículo flexible

Cada elemento secundario de un contenedor flexible se convierte en un elemento flexible. Estos elementos flexibles pueden recibir propiedades adicionales para modificar cómo se colocan en la página.

.item {
  flex: 1;
}

Esta propiedad flex: 1 es una abreviatura de flex-grow: 1 que le permite crecer en relación con sus hermanos dentro del contenedor.

Al juntarlos, este es el marcado HTML:

<div class="container">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>

Introducción a la caja flexible

El diseño Flexbox (caja flexible), introducido en CSS3, proporciona una forma más eficiente de diseñar, alinear y distribuir el espacio entre los elementos secundarios (“elementos flexibles”) dentro de un elemento contenedor (“contenedor flexible”). Lo que es más importante, incluso cuando sus tamaños son desconocidos o dinámicos y de ahí el término “flexible” o “flexible”.

Comencemos con lo básico y veamos cómo se puede inicializar un contenedor como flex.

Considere el siguiente marcado:

<div class="flex-container">
  <div class="flex-item-1"></div>
  <div class="flex-item-2"></div>
  <div class="flex-item-3"></div>
</div>

Un flexbox se inicializa simplemente usando display: flex. ¡Hecho!

.flex-container {
  height: 100px;
  padding: 10px;
  background: grey;

  display: flex; // or display: inline-flex;
}

Ahora que el contenedor flexible está listo, juguemos con sus elementos flexibles dándoles un ancho de, digamos, 25 % cada uno y alineando horizontalmente al centro los elementos flexibles dentro de su contenedor principal.

.flex-item-1 {
  width: 25%;
  background: green;
}

.flex-item-2 {
  width: 25%;
  background: purple;
}

.flex-item-3 {
  width: 25%;
  background: pink;
}

Tenga en cuenta que a propósito les he dado a los 3 niños un ancho del 25% cada uno para mostrar lo fácil que es moverse entre los niños dentro de una caja flexible.

Ahora, cuando ejecutamos el código anterior, deberíamos ver los 3 niños dentro del contenedor horizontalmente uno al lado del otro. Esto se debe a que, de forma predeterminada, un flexbox tiene la propiedad flex-direction: row. Lo que significa que, de forma predeterminada, los elementos flexibles se alinearán horizontalmente uno al lado del otro. También debería haber un espacio a la derecha ya que el ancho total de los niños no sumaba el 100%.

Ahora intente agregar la propiedad justify-content: center al flex-container.

.flex-container {
  ...
  justify-content: center;
}

El resultado sería que los niños estuvieran alineados horizontalmente al centro. La misma propiedad tiene otros valores como flex-end(alinear a la derecha), space-around(igual espacio alrededor de los elementos), space- between(igual espacio entre los elementos).

Importante: Otras propiedades de elementos de bloque como text-align: center etc. no tienen efecto en un elemento flexible.

Instalación o configuración

Flexbox es un módulo CSS3, estandarizado por el World Wide Web Consortium. Es un modo de diseño para la disposición de los elementos de modo que los elementos se comporten de manera predecible cuando el diseño de la página deba adaptarse a diferentes tamaños de visualización.

Debido a que es parte de CSS3, no necesita instalar nada. Se puede usar siempre que el navegador lo admita, y la mayoría de los navegadores modernos lo hacen. Para verificar si su navegador lo admite o no, aquí está el [cuadro de compatibilidad] (http://caniuse.com/#feat=flexbox).

Para configurar y usar flexbox en su CSS, simplemente agregue display: flex a un selector.