La Guía Definitiva de Flexbox
Aprende a usar CSS Flexbox con esta guía completa que cubre todas las áreas principales, con ejemplos y consejos prácticos.
Resumen
El modelo de diseño Flexbox, reconocido oficialmente como CSS Flexible Box Layout Module, es un modelo de maquetación en CSS.
Flexbox es un diseño unidimensional, lo que significa que distribuye los elementos en una sola dimensión a la vez, ya sea como fila o como columna, pero no ambas al mismo tiempo. Esto contrasta con el modelo bidimensional — CSS Grid Layout, que distribuye los elementos en dos dimensiones simultáneamente (filas y columnas a la vez).
Flexbox fue introducido como alternativa a los flotantes de CSS para controlar la apariencia general de una página web. Flexbox ofrece muchas ventajas; en particular, permite controlar la alineación, la dirección, el orden y el tamaño de los elementos.
Los elementos dentro de un contenedor flex:
- pueden organizarse en cualquier dirección (hacia la izquierda, hacia la derecha, hacia abajo o incluso hacia arriba) (flex-direction).
- pueden tener orden directo (de izquierda a derecha) o inverso (de derecha a izquierda).
- pueden tener ancho y alto "flex" para rellenar el espacio disponible (flex-item).
- pueden configurarse para colapsar o expandirse dinámicamente a lo largo del eje principal, manteniendo al mismo tiempo el tamaño del eje transversal secundario.
- pueden organizarse linealmente a lo largo del eje principal o envolverse en múltiples líneas a lo largo o en sentido contrario al eje transversal.
Flexbox es relativamente nuevo, pero hoy en día goza de un excelente soporte en los navegadores.
(Más información sobre soporte y compatibilidad en navegadores).
Conceptos Básicos de Flexbox
Al trabajar con Flexbox es necesario pensar en términos de dos ejes — el eje principal y el eje transversal — y diferenciar entre contenedores flex y elementos flex.
Eje Principal y Eje Transversal
Flexbox es un diseño orientado a un solo eje; tiene un eje principal y un eje transversal. Esto significa que los elementos se disponen a lo largo del eje principal o del eje transversal. El eje transversal siempre es perpendicular al eje principal.
El eje principal está definido por la propiedad flex-direction, que acepta los siguientes valores:
- row
- row-reverse
- column
- column-reverse
Si la propiedad flex-direction se especifica con los valores row o row-reverse, el eje principal será horizontal, es decir, correrá a lo largo de la fila en la dirección en línea. El eje transversal correrá hacia abajo a lo largo de las columnas.
Si la propiedad flex-direction se especifica con los valores column o column-reverse, el eje principal será vertical, es decir, irá desde la parte superior de la página hasta la inferior en la dirección de bloque. En cuanto al eje transversal, correrá a lo largo de las filas.
Echa un vistazo a esta figura para comprender mejor el concepto detrás del eje de Flexbox.
- main axis - El eje principal de un contenedor flex es el eje a lo largo del cual se colocan los elementos flex.
- main-start | main-end - Los elementos flex se distribuyen dentro del contenedor comenzando desde main-start hasta main-end.
- main size - El ancho o alto de un elemento flex en la dimensión principal es el tamaño principal del elemento.
- cross axis - El eje perpendicular al eje principal, cuya dirección depende de la dirección del eje principal (horizontal o vertical).
- cross-start | cross-end - Las líneas flex se rellenan con elementos y se colocan en el contenedor comenzando desde el lado cross-start del contenedor flex y avanzando hacia el lado cross-end.
- cross size - El ancho o alto de un elemento flex en la dimensión transversal es el tamaño transversal del elemento.
Fuente: W3.org
Contenedores e Ítems Flex
El contenedor flex es un elemento padre que agrupa un conjunto de elementos hijo, los ítems flex. En la mayoría de los casos, el contenedor define el diseño y la posición de sus ítems flex; sin embargo, los ítems flex pueden manipularse de forma individual.
Para convertir un elemento HTML en un contenedor Flex se debe usar la propiedad display con los valores flex (caja contenedora flex a nivel de bloque) o inline-flex (define una caja contenedora flex a nivel en línea). De lo contrario, el navegador ignorará todas las propiedades de Flexbox que se hayan utilizado.
Contenedor Flexbox
.container {
display: flex; /* or inline-flex*/
}Propiedades del Contenedor Flex
La propiedad flex-direction
La propiedad flex-direction se utiliza para crear diseños en fila y columna. Especifica las direcciones del eje principal del contenedor flex y establece el orden en que aparecen los elementos.
La propiedad flex-direction acepta los siguientes valores:
- row - los elementos se muestran a lo largo de la fila de izquierda a derecha.
- row-reverse - los elementos se muestran de derecha a izquierda.
- column - los elementos se muestran verticalmente de arriba a abajo.
- column-reverse - los elementos se muestran verticalmente de abajo a arriba.
Ejemplo de la propiedad flex-direction:
Ejemplo de la propiedad flex-direction
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
h3 {
color: #8ebf42;
}
.flex-container {
display: flex;
flex-direction: row-reverse;
padding: 30px;
border: 1px dashed #666;
}
.flex-container > div {
width: 80px;
height: 70px;
margin: 5px;
border-radius: 3px;
background-color: #1faadb;
}
</style>
</head>
<body>
<h3>row-reverse</h3>
<div class="flex-container">
<div></div>
<div></div>
<div></div>
</div>
</body>
</html>En nuestro ejemplo los elementos están organizados en orden inverso. Cambia los valores de la propiedad flex-direction (row, column, column-reverse) para ver cómo cambia la apariencia de los elementos.
Nota: row y row-reverse dependen del modo de escritura, por lo que en un contexto rtl (derecha a izquierda) estarán invertidos respectivamente.
La propiedad flex-wrap
Por defecto, todos los ítems flex caben en una sola línea y, si son demasiado anchos para el contenedor, lo desbordarán. Para evitar esto debes usar la propiedad flex-wrap para envolver los elementos.
La propiedad acepta los siguientes valores:
- nowrap (predeterminado) - los ítems flex se muestran en una sola línea; por defecto se ajustan al ancho del contenedor flex.
- wrap - los ítems flex se muestran en múltiples filas si es necesario, de izquierda a derecha y de arriba a abajo.
- wrap-reverse - los ítems flex se muestran en múltiples filas si es necesario, de izquierda a derecha y de abajo a arriba.
Nota: La propiedad depende del modo de escritura, por lo que en un contexto rtl (derecha a izquierda) estarán invertidos respectivamente.
La propiedad justify-content
La propiedad justify-content se utiliza para definir la alineación horizontal de los elementos a lo largo del eje principal. Ayuda a distribuir el espacio libre que queda entre los ítems flex en el eje principal.
Los valores para justify-content son los siguientes:
- flex-start (valor predeterminado) - los elementos se colocan al inicio del contenedor.
- flex-end - los elementos se colocan al final del contenedor.
- center - los elementos se colocan en el centro del contenedor.
- space-between - los elementos se distribuyen uniformemente (con espacio entre ellos) en la línea; el primer elemento está en la línea de inicio y el último en la línea de fin.
- space-around - los elementos se muestran con espacio antes, entre y después de ellos.
- space-evenly - los elementos se distribuyen de modo que el espacio entre dos elementos cualesquiera (y el espacio hacia los bordes) sea igual.
Ejemplo de la propiedad justify-content:
Propiedad justify-content, ejemplos
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.flex-container {
display: flex;
padding: 10px;
margin-bottom: 20px;
background-color: #1faadb;
}
.flex-start {
justify-content: flex-start;
}
.flex-end {
justify-content: flex-end;
}
.center {
justify-content: center;
}
.space-between {
justify-content: space-between;
}
.space-around {
justify-content: space-around;
}
.flex-container > div {
width: 28%;
height: 45px;
margin: 5px;
border-radius: 3px;
background-color: #8ebf42;
}
.flex-container > div.item-two {
width: 18%;
}
</style>
</head>
<body>
<p>flex-start</p>
<div class="flex-container flex-start">
<div></div>
<div class="item-two"></div>
<div></div>
</div>
<p>flex-end</p>
<div class="flex-container flex-end">
<div></div>
<div class="item-two"></div>
<div></div>
</div>
<p>center</p>
<div class="flex-container center">
<div></div>
<div class="item-two"></div>
<div></div>
</div>
<p>space-between</p>
<div class="flex-container space-between">
<div></div>
<div class="item-two"></div>
<div></div>
</div>
<p>space-around</p>
<div class="flex-container space-around">
<div></div>
<div class="item-two"></div>
<div></div>
</div>
</body>
</html>Cambia el valor de la propiedad justify-content para ver cómo se alinean los elementos.
La propiedad align-items
La propiedad align-items se utiliza para alinear los elementos a lo largo del eje transversal. Es justo lo opuesto a la propiedad justify-content, que alinea los elementos a lo largo del eje principal.
Los valores para align-items son los siguientes:
- stretch (predeterminado) - los elementos se estiran para llenar el contenedor.
- flex-start - los elementos se apilan al inicio transversal del contenedor.
- flex-end - los elementos se apilan al final transversal del contenedor.
- center - los elementos se apilan en el centro del eje transversal.
- baseline - los elementos se alinean de modo que sus líneas base queden alineadas.
Nota: Si la altura del contenedor flex está limitada, el valor stretch puede hacer que el contenido del ítem flex desborde el elemento.
Ejemplo de la propiedad align-items:
Propiedad align-items, ejemplo de código
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.flex-container {
display: flex;
justify-content: space-between;
align-items: center; /* Use another value to see the result */
height: 250px;
padding: 15px;
background-color: #1faadb;
}
.flex-container > div {
width: 15%;
height: 100%;
border-radius: 3px;
background-color: #8ebf42;
}
.flex-container .one {
height: 60%;
}
.flex-container .three {
height: 40%;
}
.flex-container .four {
height: 70%;
}
</style>
</head>
<body>
<div class="flex-container">
<div class="one"></div>
<div class="two"></div>
<div class="three"></div>
<div class="four"></div>
</div>
</body>
</html>En nuestro ejemplo usamos el valor center para centrar los elementos en el eje transversal. Prueba otros valores y observa el resultado.
La propiedad align-content
La propiedad align-content se utiliza para alinear las líneas de un contenedor flex dentro del contenedor cuando hay espacio adicional en el eje transversal, de la misma manera que justify-content alinea los elementos individuales dentro del eje principal.
Nota: La propiedad align-content no funciona cuando hay una sola línea en el contenedor flex.
Los valores para align-content y su significado son los siguientes:
- stretch (predeterminado) - las líneas se estiran para ocupar el espacio disponible.
- flex-start - las líneas se agrupan al inicio del contenedor.
- flex-end - las líneas se agrupan al final del contenedor.
- center - las líneas se agrupan en el centro del contenedor.
- space-between - las líneas se distribuyen uniformemente; la primera línea está al inicio del contenedor y la última al final.
- space-around - las líneas se distribuyen uniformemente con espacio igual alrededor de cada línea.
Ejemplo de la propiedad align-content:
Ejemplo de la propiedad align-content
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.flex-container {
display: flex;
flex-wrap: wrap;
align-content: flex-end/* Use another value to see the result */;
min-height: 250px;
padding: 10px;
background-color: #1faadb;
}
.flex-container>div {
width: 45%;
height: 45px;
margin: 5px;
border-radius: 3px;
background-color: #8ebf42;
}
.flex-container .one,
.flex-container .nine {
width: 23%;
}
.flex-container .two,
.flex-container .six {
width: 9%;
}
.flex-container .three {
width: 25%;
}
.flex-container .four {
width: 35%;
}
.flex-container .five,
.flex-container .eleven {
width: 32%;
}
.flex-container .seven,
.flex-container .ten {
width: 6%;
}
</style>
</head>
<body>
<p>flex-end</p>
<div class="flex-container">
<div class="one"></div>
<div class="two"></div>
<div class="three"></div>
<div class="four"></div>
<div class="five"></div>
<div class="six"></div>
<div class="seven"></div>
<div class="eight"></div>
<div class="nine"></div>
<div class="ten"></div>
<div class="eleven"></div>
</div>
</body>
</html>La propiedad gap
La propiedad gap define el espacio entre los ítems flex (los espacios intermedios), sin agregar espacio en los bordes exteriores del contenedor. Es una alternativa más limpia a establecer margin en elementos individuales, ya que nunca produce un espacio no deseado antes del primer elemento ni después del último. Puedes pasar un solo valor para un espaciado igual en filas y columnas, o dos valores (row-gap column-gap).
Propiedad gap, ejemplo de código
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.flex-container {
display: flex;
flex-wrap: wrap;
gap: 10px 20px; /* row-gap column-gap */
padding: 10px;
border: 1px dashed #666;
}
.flex-container > div {
width: 80px;
height: 70px;
border-radius: 3px;
background-color: #8ebf42;
}
</style>
</head>
<body>
<div class="flex-container">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</body>
</html>La propiedad flex-flow
Esta es una propiedad abreviada para las propiedades individuales flex-direction y flex-wrap, que juntas definen los ejes principal y transversal del contenedor flex. El valor predeterminado es row nowrap.
Nota: Las direcciones de flex-flow son sensibles al modo de escritura, por lo que en un contexto rtl (derecha a izquierda) el contenido se invertirá respectivamente.
Ejemplo de la propiedad flex-flow:
Propiedad flex-flow, ejemplo de código
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.flex-container {
display: flex;
flex-flow: row-reverse wrap; /* Use another value to see the result */
padding: 30px;
border: 1px dashed #666;
}
.flex-container > div {
width: 30%;
height: 70px;
margin: 5px;
border-radius: 3px;
background-color: #8ebf42;
text-align: center;
font-size: 28px;
font-weight: 700;
line-height: 70px;
color: #fff;
}
</style>
</head>
<body>
<div class="flex-container">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
</body>
</html>Puedes elegir otro valor para ver cómo cambia la posición de los elementos.
Propiedades de los Ítems Flex
La propiedad order
Por defecto, los elementos se distribuyen en el orden en que aparecen en el código fuente (comenzando desde el grupo ordinal de número más bajo hacia arriba). Para cambiar el orden de los elementos en el contenedor flex se utiliza la propiedad order.
La propiedad order establece el orden de los ítems flex asignándoles grupos ordinales. Acepta un único valor entero que define el grupo ordinal al que pertenece el ítem flex. El valor predeterminado es 0.
Ejemplo de la propiedad order:
Propiedad order de Flexbox
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.flex-container {
display: flex;
flex-flow: row wrap;
padding: 30px;
border: 1px dashed #666;
}
.flex-container > div {
width: 30%;
height: 70px;
margin: 5px;
border-radius: 3px;
background-color: #8ebf42;
text-align: center;
font-size: 28px;
font-weight: 700;
line-height: 70px;
color: #fff;
}
.item-one {
order: 1;
}
.item-four {
order: -1;
}
.item-five {
order: 0;
}
.item-three {
order: 2;
}
</style>
</head>
<body>
<div class="flex-container">
<div class="item-one">1</div>
<div class="item-two">2</div>
<div class="item-three">3</div>
<div class="item-four">4</div>
<div class="item-five">5</div>
</div>
</body>
</html>La propiedad align-self
Esta propiedad se usa para alinear elementos individualmente dentro del contenedor flex. Los ítems flex se alinean en el eje transversal de la línea del contenedor flex (igual que justify-content, pero en la dirección perpendicular). Cuando se establece, la propiedad align-self anula la alineación especificada por align-items.
Nota: Si el margen de cualquiera de los ejes transversales del elemento está configurado en auto, entonces align-self se ignora.
La propiedad align-self tiene los mismos valores que align-items. Se enumeran a continuación para tu comodidad.
- stretch (predeterminado) - los elementos se estiran para llenar el contenedor.
- flex-start - los elementos se apilan al inicio transversal del contenedor.
- flex-end - los elementos se apilan al final transversal del contenedor.
- center - los elementos se apilan en el centro del eje transversal.
- baseline - los elementos se alinean de modo que sus líneas base queden alineadas.
Ejemplo de la propiedad align-self:
Ejemplo de la propiedad align-self
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.flex-container {
display: flex;
justify-content: space-between;
height: 300px;
padding: 10px;
border: 1px dashed #666;
}
.flex-container > div {
width: 15%;
height: 80%;
margin: 5px;
border-radius: 3px;
background-color: #8ebf42;
}
div.item-two {
width: 20%;
}
div.item-three {
align-self: flex-end;
height: 80px;
margin: 0 10%;
}
</style>
</head>
<body>
<div class="flex-container">
<div class="item-one"></div>
<div class="item-two"></div>
<div class="item-three"></div>
<div class="item-four"></div>
</div>
</body>
</html>La propiedad flex-grow
La propiedad flex-grow define la capacidad de un elemento para crecer si es necesario. Establece el factor de crecimiento flex (en relación con el resto de los elementos dentro del contenedor), que especifica el espacio que el elemento debe ocupar en el contenedor al distribuir espacio positivo.
La propiedad acepta un valor sin unidad que sirve como proporción.
Nota: El valor no puede ser un número negativo.
Si todos los elementos del contenedor tienen el mismo valor para flex-grow (por ejemplo, 1), entonces todos los elementos tienen el mismo tamaño en el contenedor.
Si el tamaño de uno de los ítems flex es diferente (por ejemplo, 2), entonces ese elemento ocupará el doble de espacio en relación con el tamaño de los demás elementos (cuyo tamaño está configurado en 1).
Ejemplo de la propiedad flex-grow:
Propiedad flex-grow, ejemplo de código
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.flex-container {
display: flex;
margin-bottom: 20px;
}
.flex-container div {
flex-grow: 0.2;
padding: 30px 5px;
margin-right: -2px;
border: 2px solid #8ebf42;
}
.flex-container div.two {
flex-grow: 5;
}
.flex-container span {
display: flex;
justify-content: center;
align-items: center;
width: 60px;
height: 60px;
margin: auto;
border-radius: 50%;
background-color: #8ebf42;
font-size: 28px;
font-weight: 700;
color: #fff;
}
</style>
</head>
<body>
<div class="flex-container">
<div>
<span>1</span>
</div>
<div>
<span>2</span>
</div>
<div>
<span>3</span>
</div>
<div>
<span>4</span>
</div>
<div><span>5</span>
</div>
</div>
<div class="flex-container">
<div>
<span>1</span>
</div>
<div class="two">
<span>2</span>
</div>
<div>
<span>3</span>
</div>
<div>
<span>4</span>
</div>
<div>
<span>5</span>
</div>
</div>
</body>
</html>Recomendamos usar la propiedad abreviada flex en lugar de flex-grow para controlar la flexibilidad, ya que restablece correctamente los componentes no especificados para adaptarse a los usos más comunes.
La propiedad flex-shrink
La propiedad flex-shrink se establece para permitir que un ítem flex se contraiga. Especifica el espacio que el elemento debe ocupar en el contenedor cuando se distribuye espacio negativo.
La propiedad acepta un valor sin unidad.
Nota: El valor no puede ser un número negativo.
Por defecto todos los ítems flex pueden contraerse, pero si establecemos el valor en 0 (sin contracción) conservarán su tamaño original.
Ejemplo de la propiedad flex-shrink:
Ejemplo de la propiedad flex-shrink
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.flex-container {
display: flex;
}
.flex-container div {
width: 120px;
padding: 30px 10px;
margin-right: -2px;
border: 2px solid #8ebf42;
}
.flex-container div.two {
flex-shrink: 0;
}
.flex-container span {
display: flex;
justify-content: center;
align-items: center;
width: 60px;
height: 60px;
margin: auto;
border-radius: 50%;
background-color: #8ebf42;
font-size: 28px;
font-weight: 700;
color: #fff;
}
</style>
</head>
<body>
<div class="flex-container">
<div>
<span>1</span>
</div>
<div class="two">
<span>2</span>
</div>
<div>
<span>3</span>
</div>
<div>
<span>4</span>
</div>
<div>
<span>5</span>
</div>
<div>
<span>6</span>
</div>
</div>
</body>
</html>Recomendamos usar la propiedad abreviada flex en lugar de flex-shrink para controlar la flexibilidad, ya que restablece correctamente los componentes no especificados para adaptarse a los usos más comunes.
La propiedad flex-basis
La propiedad flex-basis establece el tamaño inicial de un ítem flex, antes de que el espacio restante se distribuya según los factores flex. La propiedad se especifica mediante la palabra clave content o width.
Los valores de flex-basis son los siguientes:
- auto (predeterminado) - la longitud es igual a la longitud del elemento flexible.
- width - una longitud absoluta, o un porcentaje del tamaño del eje principal del contenedor flex padre, o la palabra clave auto. Los valores negativos no son válidos.
- content - determina el dimensionamiento automático basado en el contenido del ítem flex.
- initial - establece esta propiedad en su valor predeterminado.
Nota: La propiedad content aún no tiene un buen soporte, por lo que no es fácil entender qué hacen sus variantes max-content, min-content y fit-content.
Ejemplo de la propiedad flex-basis:
Propiedad flex-basis, ejemplo de código
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.flex-container {
display: flex;
background-color: #8ebf42;
}
.flex-container div {
padding: 30px 10px;
margin-right: -2px;
border: 2px solid #8ebf42;
background-color: #fff;
}
.flex-container div.four {
flex-basis: 25%;
}
.flex-container span {
display: flex;
justify-content: center;
align-items: center;
width: 60px;
height: 60px;
margin: auto;
border-radius: 50%;
background-color: #8ebf42;
font-size: 28px;
font-weight: 700;
color: #fff;
}
</style>
</head>
<body>
<div class="flex-container">
<div>
<span>1</span>
</div>
<div>
<span>2</span>
</div>
<div>
<span>3</span>
</div>
<div class="four">
<span>4</span>
</div>
<div>
<span>5</span>
</div>
</div>
</body>
</html>La propiedad flex
La propiedad flex es la abreviatura de flex-grow, flex-shrink y flex-basis juntos. flex-shrink y flex-basis son opcionales.
Entre otros valores, esta propiedad puede aceptar auto (1 1 auto) o none (0 0 auto).
Recomendamos encarecidamente usar la propiedad abreviada flex en lugar de las propiedades individuales.
Ejemplo de la propiedad flex:
flex en lugar de flex-shrink, ejemplo de código
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.flex-container {
display: flex;
height: 150px;
padding: 10px;
margin-bottom: 20px;
border: 1px dashed #666;
}
.flex-container > div {
width: 15%;
margin: 5px;
border-radius: 3px;
background-color: #8ebf42;
}
.second > div {
flex: 1;
}
</style>
</head>
<body>
<div class="flex-container">
<div></div>
<div></div>
<div></div>
</div>
<div class="flex-container second">
<div></div>
<div></div>
<div></div>
</div>
</body>
</html>Nota: Las propiedades CSS float, clear y vertical-align no tienen efecto sobre los ítems flex.
Ejemplos de Flexbox
Echemos un vistazo a algunos ejemplos de CSS Flexbox y veamos qué tipo de diseños puedes usar en tus propios proyectos web.
Centrado de Elementos Vertical y Horizontalmente
Centrar elementos por todos los medios disponibles en CSS siempre ha sido un problema. Con la llegada de Flexbox este problema se resuelve fácilmente. Con las propiedades align-items, align-self y justify-content puedes alinear elementos tanto vertical como horizontalmente.
Ejemplo de las propiedades align-items, align-self y justify-content para centrar elementos vertical y horizontalmente:
Centrado de Elementos Vertical y Horizontalmente con Flexbox
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.flex-container {
display: flex;
justify-content: center;
align-items: center;
height: 200px;
border: 1px dashed #666;
}
.flex-container > div {
width: 70px;
height: 70px;
margin: 5px;
border-radius: 3px;
background-color: #1faadb;
}
</style>
</head>
<body>
<div class="flex-container">
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</body>
</html>Barra de Navegación Responsiva con Búsqueda
Usando Flexbox puedes crear una barra de navegación con los elementos del menú alineados a la izquierda y la barra de búsqueda alineada a la derecha (o viceversa). La barra de navegación es responsiva: se expande o colapsa según el tamaño de la pantalla.
Ejemplo de la barra de navegación responsiva:
Ejemplo de barra de navegación con Flexbox
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.main-nav {
display: flex;
padding: 15px;
border-radius: 5px;
background: #1c87c9;
color: #fff;
font-weight: 500;
}
.main-nav > ul {
display: flex;
flex: 2;
padding: 0;
margin: 0;
list-style-type: none;
}
.main-nav li {
margin-right: 20px;
}
.main-nav > form {
display: flex;
justify-content: flex-end;
flex: 1;
}
.main-nav input {
flex: 1;
padding: 5px;
}
.main-nav button {
padding: 0 20px;
margin-left: 10px;
border: 0;
border-radius: 20px;
background: #fff;
color: #666;
}
@media screen and (max-width: 575px) {
.main-nav {
flex-direction: column;
}
.main-nav ul {
margin-bottom: 10px;
}
}
</style>
</head>
<body>
<nav class="main-nav">
<ul>
<li>Home</li>
<li>About us</li>
<li>Services</li>
<li>Contact us</li>
</ul>
<form>
<input type="search" placeholder="Search" />
<button type="button">Go</button>
</form>
</nav>
</body>
</html>El Diseño Holy Grail
El patrón de diseño Holy Grail es muy popular en la web. Incluye encabezado, pie de página, el área de contenido principal con navegación de ancho fijo a la izquierda, contenido en el centro y una barra lateral de ancho fijo a la derecha.
Ejemplo del diseño Holy Grail:
Diseño Holy Grail con Flexbox, ejemplo
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
* {
box-sizing: border-box;
font-size: 18px;
}
body {
display: flex;
flex-direction: column;
min-height: 100vh;
margin: 0;
}
.main {
display: flex;
flex: 1;
}
.main > article {
flex: 1;
}
.main > nav,
.main > aside {
flex: 0 0 20vw;
background: #d5dce8;
}
.main > nav {
order: -1;
}
header,
footer {
background: #1c87c9;
height: 15vh;
}
header,
footer,
article,
nav,
aside {
padding: 20px;
}
</style>
</head>
<body>
<header>Header</header>
<div class="main">
<article>Article</article>
<nav>Nav</nav>
<aside>Aside</aside>
</div>
<footer>Footer</footer>
</body>
</html>