Módulo de diseño CSS Flexbox
Antes del módulo Flexbox Layout, había cuatro modos de diseño:
- Block, por secciones en una página web
- Inline por texto
- Table, Tabla, para datos de tablas bidimensionales
- Posicionado, para la posición explícita de un elemento
El módulo de diseño de caja flexible (Flexbox)facilita el diseño de una estructura de diseño Responsive flexible sin usar float o position.
Elementos Flexbox
Para comenzar a usar el modelo Flexbox, primero debe definir un contenedor flexible.
El elemento de arriba representa un contendor flex (el área azul) con 3 elementos flexibles. Veamos un ejm con ello.
Ejm
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Modelo Flex</title>
<style>
.flex-container {
display: flex;
background-color: DodgerBlue;
}
.flex-container > div {
background-color: #f1f1f1;
margin: 10px;
padding: 20px;
font-size: 30px;
}
</style>
</head>
<body>
<h1>Crear un contenedor Flex</h1>
<div class="flex-container">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
<p>Un diseño flexible debe tener un elemento principal con la propiedad <em>display</em> establecida en <em>flex</em>.</p>
<p></p>
</body>
</html>
Elemento padre (contenedor)
Como especificamos más arriba, este es un contenedor flexible (el área azul) con tres elementos flexibles. El contenedor flexible se vuelve flexible al establecer la propiedad de visualización en flex.
.flex-container {
display: flex;
}
Las propiedades del contenedor flex son:
- flex-direction
- flex-wrap
- flex-flow
- justify-content
- align-items
- align-content
La propiedad flex-direction
Dicha propiedad define en que dirección el contenedor quiere apilar los items.
Ejm
.flex-container {
display: flex;
flex-direction: column;
}
El valor column-reverse apila los elementos flexibles verticalmente (pero de abajo hacia arriba).
Ejm
.flex-container {
display: flex;
flex-direction: column-reverse;
}
El valor row apila los elementos flexibles horizontalmente (de izquierda a derecha):
Ejm
.flex-container {
display: flex;
flex-direction: row;
}
El valor row-reverse apila los elementos flexibles horizontalmente (pero de derecha a izquierda).
Ejm
.flex-container {
display: flex;
flex-direction: row-reverse;
}
La propiedad flex-wrap
La propiedad flex-wrap especifica si los elementos flexibles deben ajustarse o no. Los ejemplos a continuación tienen 12 elementos flexibles, para demostrar mejor la propiedad flex-wrap.
Ejm
<!DOCTYPE html>
<html>
<head>
<style>
.flex-container {
display: flex;
flex-wrap: wrap;
background-color: DodgerBlue;
}
.flex-container > div {
background-color: #f1f1f1;
width: 100px;
margin: 10px;
text-align: center;
line-height: 75px;
font-size: 30px;
}
</style>
</head>
<body>
<h1>La propiedad flex-wrap</h1>
<p> La propiedad flex-wrap: wrap;" especifica que los elementos flexibles se ajustarán si es necesario:</p>
<div class="flex-container">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
<div>10</div>
<div>11</div>
<div>12</div>
</div>
<p>Try resizing the browser window.</p>
</body>
</html>
El valor nowrap especifica que los elementos flexibles no se ajustarán (esto es predeterminado).
Ejm
.flex-container {
display: flex;
flex-wrap: nowrap;
}
El valor wrap-reverse especifica que los artículos flexibles se ajustarán si es necesario, en orden inverso.
Ejm
.flex-container {
display: flex;
flex-wrap: wrap-reverse;
}
La propiedad flex-flow
La propiedad flex-flow es una propiedad abreviada para establecer las propiedades de dirección flexible y envoltura flexible.
Ejm
.flex-container {
display: flex;
flex-flow: row wrap;
}
La propiedad justify-content
Esta propiedad es usada para alinear los items flex.
Ejm
.flex-container {
display: flex;
justify-content: center;
}
El valor flex-start alinea los elementos flexibles al comienzo del contenedor (esto es el valor predeterminado).
Ejm
.flex-container {
display: flex;
justify-content: flex-start;
}
El valor flex-end alinea los elementos flexibles al final del contenedor.
Ejm
.flex-container {
display: flex;
justify-content: flex-end;
}
El valor space-around muestra los elementos flexibles con espacio antes, entre y después de las líneas.
Ejm
.flex-container {
display: flex;
justify-content: space-around;
}
El valor space-between muestra los elementos flexibles con espacio entre líneas.
Ejm
.flex-container {
display: flex;
justify-content: space-between;
}
La propiedad align-items
La propiedad align-items se utiliza para alinear los elementos flexibles. En estos ejemplos, usamos un contenedor de 200 píxeles de alto para demostrar mejor la propiedad align-items.
El valor center alinea los elementos flexibles en el medio del contenedor:
Ejm
.flex-container {
display: flex;
height: 200px;
align-items: center;
}
El valor flex-start alinea los elementos flexibles en la parte superior del contenedor, mientras que el valor flex-end alinea los elementos flexibles en la parte inferior. El valor stretch estira los elementos flexibles para llenar el contenedor (esto es predeterminado). El valor baseline alinea los elementos flexibles tal como se alinean sus líneas de base.
La propiedad align-content
La propiedad align-content se utiliza para alinear las líneas flexibles. En estos ejemplos, usamos un contenedor de 600 píxeles de alto, con la propiedad flex-wrap establecida en wrap, para demostrar mejor la propiedad align-content.
El valor space-between muestra las líneas flexibles con el mismo espacio entre ellas. El valor space-around muestra las líneas flexibles con espacio antes, entre y después de ellas. El valor stretch estira las líneas flexibles para ocupar el espacio restante (esto es predeterminado). Las pantallas de valor center muestran las líneas flexibles en el medio del contenedor. El valor flex-start muestra las líneas flexibles al comienzo del contenedor. El valor de flex-end muestra las líneas flexibles al final del contenedor.
Centrado perfecto
En el siguiente ejemplo resolveremos un problema de estilo muy común: el centrado perfecto.
SOLUCIÓN: establece las propiedades de justify-content y align-items en el centro, y el elemento flexible estará perfectamente centrado.
Ejm
<!DOCTYPE html>
<html>
<head>
<style>
.flex-container {
display: flex;
justify-content: center;
align-items: center;
height: 300px;
background-color: DodgerBlue;
}
.flex-container > div {
background-color: #f1f1f1;
color: white;
width: 100px;
height: 100px;
}
</style>
</head>
<body>
<h1>Perfect Centering</h1>
<p>Un contenedor flexible con las propiedades justify-content y align-items
establecido en <em>center</em> alineará los elementos en el centro (en ambos ejes).</p>
<div class="flex-container">
<div></div>
</div>
</body>
</html>
Resumen
| Propiedad |
Descripción |
| align-content |
Modifica el comportamiento de la propiedad flex-wrap. Es similar a alinear elementos, pero en lugar de alinear elementos flexibles, alinea líneas flexibles |
| align-items |
Alinea verticalmente los elementos flexibles cuando los elementos no utilizan todo el espacio disponible en el eje transversal |
| display |
Especifica el tipo de cuadro utilizado para un elemento HTML |
| flex-direction |
Especifica la dirección de los elementos flexibles dentro de un contenedor flexible |
| flex-flow |
Una propiedad abreviada para flex-flow y flex-wrap |
| flex-wrap |
Especifica si los elementos flexibles deben envolverse o no, si no hay suficiente espacio para ellos en una línea flexible |
| justify-content |
Alinea horizontalmente los elementos flexibles cuando los elementos no utilizan todo el espacio disponible en el eje principal |