flexboxEmpezando con flexbox


Observaciones

Esta sección proporciona una descripción general de qué es flexbox y por qué un desarrollador puede querer usarlo.

También debe mencionar cualquier tema grande dentro de flexbox y vincular a los temas relacionados. Dado que la Documentación para flexbox es nueva, es posible que deba crear versiones iniciales de los temas relacionados.

Versiones

Contenedores Flexbox y Artículos

Flexbox o caja flexible es un método de diseño para organizar el contenido de una página de manera predecible. Flexbox ofrece una mejora con respecto al posicionamiento tradicional de modelos de bloques usando flotadores o incluso tablas como el posicionamiento para el contenido en la página.

En su núcleo, Flexbox se puede dividir en un elemento principal (contenedor flexible) y un elemento secundario (elemento flexible).

Contenedor flexible

Se puede crear un contenedor de Flex configurando su propiedad de visualización para flex:

.container {
  display: flex;
}
 

Elemento flexible

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

.item {
  flex: 1;
}
 

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

Poniendo estos juntos este es el marcado HTML:

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

Introducción a Flexbox

El diseño de Flexbox (caja flexible), introducido en CSS3, proporciona una manera más eficiente de diseñar, alinear y distribuir el espacio entre los elementos flex items (elementos flex items ) dentro de un elemento contenedor ( flex container ). Lo más importante, incluso cuando sus tamaños son desconocidos o dinámicos, y de ahí el término "flex" 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 utilizando 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, por ejemplo, un 25% cada uno y alineando en el centro horizontalmente 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 de 25% cada uno para mostrarles lo fácil que es moverse alrededor de los niños dentro de un flexbox.

Ahora, cuando ejecutamos el código anterior, deberíamos ver a 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 . De manera predeterminada, los elementos flexibles se alinearán horizontalmente uno junto al otro. También debería haber un espacio a la derecha, ya que el ancho total de los niños no sumaba hasta 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 estén alineados en el centro horizontalmente. La misma propiedad tiene otros valores como flex-end (alinear a la derecha), space-around (espacio igual alrededor de los elementos), space-between (espacio igual entre los elementos).

Importante: otras propiedades del elemento 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 elementos, de manera que los elementos se comportan de manera predecible cuando el diseño de la página debe adaptarse a diferentes tamaños de visualización.

Debido a que es una parte de CSS3, no necesita instalar nada. Puede usarse siempre que el navegador lo admita, y la mayoría de los navegadores modernos sí. Para verificar si su navegador lo admite o no, aquí está la tabla de compatibilidad .

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