La guía de Flexbox

Flexbox, también llamado Flexible Box Module, es uno de los dos sistemas de diseños modernos, junto con CSS Grid

Introducción

Flexbox, también llamado Flexible Box Module, es uno de los dos sistemas de diseño modernos, junto con CSS Grid.

Comparado con CSS Grid (que es bidimensional), flexbox es unmodelo de diseño unidimensional. Controlará el diseño basado en una fila o en una columna, pero no juntos al mismo tiempo.

El objetivo principal de flexbox es permitir que los elementos llenen todo el espacio ofrecido por su contenedor, dependiendo de algunas reglas que establezca.

A menos que necesite admitir navegadores antiguos como IE8 e IE9, Flexbox es la herramienta que le permite olvidarse de usar

  • Diseños de mesa
  • Flotadores
  • trucos de clearfix
  • display: tabletrucos

Vamos a sumergirnos en flexbox y convertirnos en maestros en muy poco tiempo.

Soporte de navegador

En el momento de escribir este artículo (febrero de 2018), es compatible con el 97,66% de los usuarios, todos los navegadores más importantes lo implementan desde hace años, por lo que incluso los navegadores más antiguos (incluido IE10 +) están cubiertos:

Browser support

Si bien debemos esperar unos años para que los usuarios se pongan al día con CSS Grid, Flexbox es una tecnología más antigua y se puede usar ahora mismo.

Habilitar Flexbox

Se aplica un diseño de caja flexible a un contenedor, estableciendo

display: flex;

o

display: inline-flex;

el contenidodentro del contenedorse alineará usando flexbox.


Propiedades del contenedor

Algunas propiedades de flexbox se aplican al contenedor, que establece las reglas generales para sus elementos. Son

  • flex-direction
  • justify-content
  • align-items
  • flex-wrap
  • flex-flow

Alinear filas o columnas

La primera propiedad que vemos,flex-direction, determina si el contenedor debe alinear sus elementos como filas o como columnas:

  • flex-direction: rowcoloca elementos como unfila, en la dirección del texto (de izquierda a derecha para países occidentales)
  • flex-direction: row-reversecoloca elementos comorowpero en la dirección opuesta
  • flex-direction: columncoloca elementos en uncolumna, ordenando de arriba a abajo
  • flex-direction: column-reversecoloca elementos en una columna, comocolumnpero en la dirección opuesta

Rows or columns

Alineación vertical y horizontal

Por defecto, los elementos comienzan desde la izquierda siflex-directionesrow, y desde arriba siflex-directionescolumn.

Vertical and horizontal alignment

Puede cambiar este comportamiento usandojustify-contentpara cambiar la alineación horizontal, yalign-itemspara cambiar la alineación vertical.

Cambiar la alineación horizontal

justify-contenttiene 5 valores posibles:

  • flex-start: alinear al lado izquierdo del contenedor.
  • flex-end: alinear al lado derecho del contenedor.
  • center: alinear en el centro del contenedor.
  • space-between: pantalla con el mismo espaciado entre ellos.
  • space-around: mostrar con el mismo espaciado alrededor de ellos

Horizontal alignment

Cambiar la alineación vertical

align-itemstiene 5 valores posibles:

  • flex-start: alinear con la parte superior del recipiente.
  • flex-end: alinear con el fondo del recipiente.
  • center: alinear en el centro vertical del contenedor.
  • baseline: se muestra en la línea de base del contenedor.
  • stretch: los artículos se estiran para que quepan en el contenedor.

Vertical alignment

Una nota sobrebaseline

baselinese parece aflex-starten este ejemplo, debido a que mis cajas son demasiado simples. Revisaeste Codepenpara tener un ejemplo más útil, que bifurqué de un lápiz creado originalmente porMartín Michálek. Como puede ver allí, las dimensiones de los elementos están alineadas.

Envoltura

Por defecto, los elementos de un contenedor flexbox se mantienen en una sola línea, encogiéndolos para que quepan en el contenedor.

Para forzar que los elementos se distribuyan en varias líneas, utiliceflex-wrap: wrap. Esto distribuirá los artículos de acuerdo con el orden establecido enflex-direction. Usarflex-wrap: wrap-reversepara invertir este orden.

Una propiedad abreviada llamadaflex-flowte permite especificarflex-directionyflex-wrapen una sola línea, agregando elflex-directionvalor primero, seguido deflex-wrapvalor, por ejemplo:flex-flow: row wrap.


Propiedades que se aplican a cada elemento individual

Desde ahora, hemos visto las propiedades que puede aplicar al contenedor.

Los elementos individuales pueden tener cierta independencia y flexibilidad, y puede modificar su apariencia utilizando esas propiedades:

  • order
  • align-self
  • flex-grow
  • flex-shrink
  • flex-basis
  • flex

Veámoslos en detalle.

Mover elementos antes / después de otro usando orden

Los artículos se ordenan según el orden que se les asigna. Por defecto, cada artículo tiene orden.0y la apariencia en el HTML determina el orden final.

Puede anular esta propiedad usandoorderen cada artículo por separado. Esta es una propiedad que establece en el artículo, no en el contenedor. Puede hacer que un elemento aparezca antes que todos los demás estableciendo un valor negativo.

Moving items before or after another one

Alineación vertical usando align-self

Un artículo puede elegiranularEl contenedoralign-itemsajuste, usandoalign-self, que tiene los mismos 5 valores posibles dealign-items:

  • flex-start: alinear con la parte superior del recipiente.
  • flex-end: alinear con el fondo del recipiente.
  • center: alinear en el centro vertical del contenedor.
  • baseline: se muestra en la línea de base del contenedor.
  • stretch: los artículos se estiran para que quepan en el contenedor.

Vertical alignment

Haga crecer o encoger un artículo si es necesario

crecimiento flexible

The defaut for any item is 0.

Si todos los elementos se definen como 1 y uno se define como 2, el elemento más grande ocupará el espacio de dos elementos "1".

flexión-encogimiento

The defaut for any item is 1.

Si todos los elementos se definen como 1 y uno se define como 3, el elemento más grande reducirá 3 veces los demás. Cuando hay menos espacio disponible, ocupará 3 veces menos espacio.

base flexible

Si se establece enauto, ajusta el tamaño de un artículo de acuerdo con su ancho o alto y agrega espacioflex-growpropiedad.

Si se establece en 0, no agrega ningún espacio adicional para el elemento al calcular el diseño.

Si especifica un valor de número de píxel, lo usará como valor de longitud (el ancho o la altura depende de si es una fila o un elemento de columna)

flexionar

Esta propiedad combina las 3 propiedades anteriores:

  • flex-grow
  • flex-shrink
  • flex-basis

y proporciona una sintaxis abreviada:flex: 0 1 auto

Descarga mi gratisManual de CSS


Más tutoriales de CSS: