Flexbox CSS

1
2
3
4
5
6
7
8

Prueba en vivo

Módulo de diseño Flexbox CSS

Antes de que se lanzara el módulo de diseño Flexbox, los patrones de diseño disponibles eran los siguientes cuatro:

  • Bloque (Block), utilizado para partes (secciones) del sitio web
  • En línea (Inline), utilizado para texto
  • Tabla, utilizada para datos de tabla bidimensional
  • Posicionamiento, utilizado para la posición explícita de los elementos

El módulo de diseño de cuadro flexible, que permite diseñar estructuras de diseño flexible y responsive más fácilmente, sin necesidad de usar flotación o posicionamiento.

Compatibilidad del navegador

Todos los navegadores modernos lo soportan flexbox Atributos.

29.0 11.0 22.0 10 48

Elementos Flexbox

Para comenzar a usar el modelo Flexbox, primero debe definir el contenedor Flex.

1
2
3

Los elementos superiores representan un contenedor flex con tres elementos flex (área azul).

Ejemplo

contenedor flex que contiene tres elementos flex:

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

Prueba en vivo

elemento padre (contenedor)

Al usar display La propiedad se establece en flexEl contenedor flex será adaptable:

1
2
3

Ejemplo

.flex-container {
  display: flex;
}

Prueba en vivo

A continuación se presentan las propiedades del contenedor flex:

Propiedad flex-direction

flex-direction La propiedad define en qué dirección el contenedor apilará los elementos flex.

1
2
3

Ejemplo

column El valor establece que los elementos flex se apilarán verticalmente (de arriba hacia abajo):

.flex-container {
  display: flex;
  flex-direction: column;
}

Prueba en vivo

Ejemplo

column-reverse El valor apila verticalmente los elementos flex (pero de abajo hacia arriba):

.flex-container {
  display: flex;
  flex-direction: column-reverse;
}

Prueba en vivo

Ejemplo

row El valor apila horizontalmente los elementos flex (de izquierda a derecha):

.flex-container {
  display: flex;
  flex-direction: row;
}

Prueba en vivo

Ejemplo

row-reverse El valor apila horizontalmente los elementos flex (pero de derecha a izquierda):

.flex-container {
  display: flex;
  flex-direction: row-reverse;
}

Prueba en vivo

Propiedad flex-wrap

flex-wrap La propiedad especifica si se deben enrollar los elementos flex.

El siguiente ejemplo contiene 12 elementos flex para demostrar mejor la propiedad flex-wrap.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

Ejemplo

wrap El valor especifica que los elementos flex se enrollarán cuando sea necesario:

.flex-container {
  display: flex;
  flex-wrap: wrap;
}

Prueba en vivo

Ejemplo

nowrap El valor especifica que no se enrollarán los elementos flex (por defecto):

.flex-container {
  display: flex;
  flex-wrap: nowrap;
}

Prueba en vivo

Ejemplo

wrap-reverse El valor especifica que, si es necesario, los elementos flex se enrollarán en orden inverso:

.flex-container {
  display: flex;
  flex-wrap: wrap-reverse;
}

Prueba en vivo

Propiedad flex-flow

flex-flow La propiedad es una abreviatura para establecer propiedades flex-direction y flex-wrap al mismo tiempo.

Ejemplo

.flex-container {
  display: flex;
  flex-flow: row wrap;
}

Prueba en vivo

Propiedad justify-content

justify-content La propiedad se utiliza para alinear los elementos flex.

1
2
3

Ejemplo

center El valor alinea los elementos flex en el centro del contenedor:

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

Prueba en vivo

Ejemplo

flex-start El valor alinea los elementos flex en el principio del contenedor (por defecto):

.flex-container {
  display: flex;
  justify-content: flex-start;
}

Prueba en vivo

Ejemplo

flex-end El valor alinea los elementos flex en el extremo final del contenedor:

.flex-container {
  display: flex;
  justify-content: flex-end;
}

Prueba en vivo

Ejemplo

space-around El valor muestra elementos flex con espacio antes, entre y después de las filas:

.flex-container {
  display: flex;
  justify-content: space-around;
}

Prueba en vivo

Ejemplo

space-between El valor muestra elementos flex con espacio entre las filas:

.flex-container {
  display: flex;
  justify-content: space-between;
}

Prueba en vivo

Propiedad align-items

align-items La propiedad se utiliza para alinear verticalmente los elementos flex.

1
2
3

En estos ejemplos, utilizamos contenedores de 200 píxeles de altura para demostrar mejor la propiedad align-items.

Ejemplo

center El valor alinea los proyectos flex en el centro del contenedor:

.flex-container {
  display: flex;
  height: 200px;
  align-items: center;
}

Prueba en vivo

Ejemplo

flex-start El valor alinea los proyectos flex en la parte superior del contenedor:

.flex-container {
  display: flex;
  height: 200px;
  align-items: flex-start;
}

Prueba en vivo

Ejemplo

flex-end El valor alinea los proyectos flex en la parte inferior del contenedor:

.flex-container {
  display: flex;
  height: 200px;
  align-items: flex-end;
}

Prueba en vivo

Ejemplo

stretch El valor estira los proyectos flex para llenar el contenedor (por defecto):

.flex-container {
  display: flex;
  height: 200px;
  align-items: stretch;
}

Prueba en vivo

Ejemplo

baseline El valor hace que los proyectos flex se alineen en la línea base:

.flex-container {
  display: flex;
  height: 200px;
  align-items: baseline;
}

Prueba en vivo

Nota:Este ejemplo utiliza diferentes valores de font-size para demostrar que los proyectos se alinean según la línea base de texto:

1
2
3
4

Propiedad align-content

align-content La propiedad se utiliza para alinear las líneas flexibles.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

En estos ejemplos, usamos un contenedor de 600 píxeles de altura y establecemos el atributo flex-wrap en wrap para demostrar mejor la propiedad align-content.

Ejemplo

space-between El valor muestra las líneas flexibles con espaciado igual entre ellas:

.flex-container {
  display: flex;
  height: 600px;
  flex-wrap: wrap;
  align-content: space-between;
}

Prueba en vivo

Ejemplo

space-around El valor muestra las líneas flexibles con espacios antes, entre y después:

.flex-container {
  display: flex;
  height: 600px;
  flex-wrap: wrap;
  align-content: space-around;
}

Prueba en vivo

Ejemplo

stretch El valor estira las líneas flexibles para ocupar el espacio restante (por defecto):

.flex-container {
  display: flex;
  height: 600px;
  flex-wrap: wrap;
  align-content: stretch;
}

Prueba en vivo

Ejemplo

center El valor se muestra en el centro del contenedor para las líneas flexibles:

.flex-container {
  display: flex;
  height: 600px;
  flex-wrap: wrap;
  align-content: center;
}

Prueba en vivo

Ejemplo

flex-start El valor se muestra en el principio del contenedor para las líneas flexibles:

.flex-container {
  display: flex;
  height: 600px;
  flex-wrap: wrap;
  align-content: flex-start;
}

Prueba en vivo

Ejemplo

flex-end El valor se muestra en la parte final del contenedor para las líneas flexibles:

.flex-container {
  display: flex;
  height: 600px;
  flex-wrap: wrap;
  align-content: flex-end;
}

Prueba en vivo

Centrado perfecto

En el siguiente ejemplo, resolveremos un problema de estilo muy común: centrado perfecto.

Solución: cambiar justify-content y align-items Establecer las propiedades en el centro, luego los proyectos flex se centrarán perfectamente:

Ejemplo

.flex-container {
  display: flex;
  height: 300px;
  justify-content: center;
  align-items: center;
}

Prueba en vivo

Elementos hijos (proyectos)

Los elementos directos del contenedor flex se convierten automáticamente en elementos flexibles (flex).

1
2
3
4

Los elementos superiores representan cuatro elementos flexibles azules dentro de un contenedor flexible gris.

Ejemplo

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

Prueba en vivo

Las propiedades utilizadas para los elementos flexibles son:

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

Propiedad order

order La propiedad especifica el orden del elemento flex.

1
2
3
4

El primer elemento flex en el código no tiene que mostrarse como el primer elemento en el diseño.

order El valor debe ser un número, y el valor predeterminado es 0.

Ejemplo

order La propiedad puede cambiar el orden de los elementos flex.

<div class="flex-container">
  <div style="order: 3">1</div>
  <div style="order: 2">2</div>
  <div style="order: 4">3</div> 
  <div style="order: 1">4</div>
</div>

Prueba en vivo

Propiedad flex-grow

flex-grow La propiedad especifica cuánto crecerá un elemento flex en comparación con los otros elementos flex.

1
2
3

Este valor debe ser un número, y el valor predeterminado es 0.

Ejemplo

Hacer que la velocidad de crecimiento del tercer elemento flexible sea ocho veces mayor que la de los otros elementos flexibles:

<div class="flex-container">
  <div style="flex-grow: 1">1</div>
  <div style="flex-grow: 1">2</div>
  <div style="flex-grow: 8">3</div> 
</div>

Prueba en vivo

Propiedad flex-shrink

flex-shrink La propiedad especifica cuánto se contraerá un elemento flex en comparación con los otros elementos flex.

1
2
3
4
5
6
7
8
9

Este valor debe ser un número, y el valor predeterminado es 0.

Ejemplo

No permitir que el tercer elemento flexible se contraiga tanto como los otros elementos flexibles:

<div class="flex-container">
  <div>1</div>
  <div>2</div>
  <div style="flex-shrink: 0">3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
  <div>7</div>
  <div>8</div>
  <div>9</div>
  <div>10</div>
</div>

Prueba en vivo

Propiedad flex-basis

flex-basis La propiedad especifica la longitud inicial del elemento flex.

1
2
3
4

Ejemplo

Establecer la longitud inicial del tercer elemento flexible en 200 píxeles:

<div class="flex-container">
  <div>1</div>
  <div>2</div>
  <div style="flex-basis: 200px">3</div>
  <div>4</div>
</div>

Prueba en vivo

Propiedad flex

flex Esta propiedad es una abreviatura de las propiedades flex-grow, flex-shrink y flex-basis.

Ejemplo

Hacer que el tercer elemento flexible no pueda crecer (0), no pueda contraer (0) y tenga una longitud inicial de 200 píxeles:

<div class="flex-container">
  <div>1</div>
  <div>2</div>
  <div style="flex: 0 0 200px">3</div>
  <div>4</div>
</div>

Prueba en vivo

Propiedad align-self

align-self La propiedad especifica el modo de alineación de los elementos seleccionados dentro del contenedor flexible.

align-self La propiedad sobrescribe el modo de alineación predeterminado establecido por la propiedad align-items del contenedor.

1
2
3
4

En estos ejemplos, usamos un contenedor de 200 píxeles de altura para mostrar mejor la propiedad align-self:

Ejemplo

Alinea el tercer elemento flexible al centro del contenedor:

<div class="flex-container">
  <div>1</div>
  <div>2</div>
  <div style="align-self: center">3</div>
  <div>4</div>
</div>

Prueba en vivo

Ejemplo

Alinea el segundo elemento flexible en la parte superior del contenedor y el tercer elemento flexible en la parte inferior del contenedor:

<div class="flex-container">
  <div>1</div>
  <div style="align-self: flex-start">2</div>
  <div style="align-self: flex-end">3</div>
  <div>4</div>
</div>

Prueba en vivo

Biblioteca de imágenes responsiva con Flexbox

Crea una biblioteca de imágenes responsiva con Flexbox, que cambia entre cuatro, dos o imágenes de ancho completo según el tamaño de la pantalla:

Prueba en vivo

Sitio web responsivo con Flexbox

Crea sitios web responsivos con flexbox, que incluyen navegación flexible y contenido flexible:

Prueba en vivo

Propiedades CSS Flexbox

La siguiente tabla enumera las propiedades CSS utilizadas con flexbox:

Propiedad Descripción
display Especifica el tipo de cuadro utilizado para los elementos HTML.
flex-direction Especifica la dirección de los elementos flexibles dentro del contenedor flexible.
justify-content Alinea horizontalmente los elementos cuando no utilizan todo el espacio disponible en el eje principal.
align-items Alinea verticalmente los elementos cuando no utilizan todo el espacio disponible en el eje principal.
flex-wrap Especifica si los elementos flexibles deben hacer scroll cuando no hay suficiente espacio en una línea flex para contenerlos.
align-content Modifica el comportamiento de la propiedad flex-wrap. Al igual que align-items, pero en lugar de alinear los elementos flexibles, alinea la línea flex.
flex-flow Atajo de propiedades de flex-direction y flex-wrap.
order Especifica el orden de los elementos flexibles en relación con los demás elementos flexibles dentro del mismo contenedor.
align-self Se utiliza para elementos flexibles. Sobrescribe la propiedad align-items del contenedor.
flex Atajo de propiedades de flex-grow, flex-shrink y flex-basis.