3.1 Flexbox
La creación de diseños flexibles usando Flexbox y Grid es una técnica clave en el desarrollo de sitios web responsivos modernos. Estas tecnologías permiten gestionar fácilmente la colocación de elementos en la página, asegurando su adaptación a diferentes tamaños de pantalla y dispositivos.
Flexbox (Flexible Box Layout Module) está diseñado para la colocación unidimensional de elementos (ya sea en filas o columnas). Flexbox simplifica la creación de layouts flexibles y responsivos.
Conceptos básicos de Flexbox:
- Flex-contenedor: elemento al que se le aplica la propiedad
display: flex - Flex-elementos: elementos hijos del flex-contenedor que se colocan dentro de él
Propiedades de Flexbox
Flex-contenedor:
display: flex: define el elemento como un contenedor flexflex-direction: establece la dirección en que se colocan los flex-elementos (row,column,row-reverse,column-reverse)justify-content: controla la alineación de los flex-elementos a lo largo del eje principal (flex-start,flex-end,center,space-between,space-around)align-items: controla la alineación de los flex-elementos a lo largo del eje cruzado (stretch,flex-start,flex-end,center,baseline)
Flex-elementos:
flex-grow: define la capacidad del elemento para crecer si hay espacio libreflex-shrink: define la capacidad del elemento para encogerse si hay falta de espacioflex-basis: establece el tamaño inicial del elemento antes de distribuir el espacio librealign-self: sobrescribe la alineación del elemento a lo largo del eje cruzado, establecida enalign-items
Ejemplo de uso de Flexbox
Crearemos un layout de tres columnas que se adaptará a diferentes tamaños de pantalla:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ejemplo Flexbox</title>
<style>
.flex-container {
display: flex;
justify-content: space-between;
align-items: stretch;
flex-wrap: wrap;
}
.flex-item {
flex: 1 1 200px;
margin: 10px;
padding: 20px;
background-color: #f4f4f4;
text-align: center;
}
</style>
</head>
<body>
<div class="flex-container">
<div class="flex-item">Columna 1</div>
<div class="flex-item">Columna 2</div>
<div class="flex-item">Columna 3</div>
</div>
</body>
</html>
Explicación del código:
-
.flex-container: define el contenedor como un contenedor flex, alinea los elementos con espacios iguales entre ellos y permite que los elementos se trasladen a la siguiente fila si hay falta de espacio. -
.flex-item: flex-elementos que ocupan el mismo espacio, tienen un ancho mínimo de 200px y se distribuyen uniformemente dentro del contenedor
3.2 CSS Grid
CSS Grid Layout es un sistema de diseño bidimensional que permite crear layouts complejos usando filas y columnas.
Conceptos básicos de CSS Grid:
- Grid-contenedor: elemento al que se le aplica la propiedad
display: grid - Grid-elementos: elementos hijos del grid-contenedor que se colocan en la cuadrícula
Propiedades de CSS Grid
Grid-contenedor:
display: grid: define el elemento como un contenedor gridgrid-template-columns: establece el número y tamaño de las columnas en la cuadrículagrid-template-rows: establece el número y tamaño de las filas en la cuadrículagap: controla los espacios entre filas y columnasjustify-items: controla la alineación horizontal de los grid-elementosalign-items: controla la alineación vertical de los grid-elementos
grid-column: define cuántas columnas el elemento va a ocupargrid-row: define cuántas filas el elemento va a ocuparjustify-self: sobrescribe la alineación horizontal del elementoalign-self: sobrescribe la alineación vertical del elemento
Grid-elementos:
Ejemplo de uso de CSS Grid
Crearemos un layout con tres columnas y dos filas que se adaptará a diferentes tamaños de pantalla.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ejemplo CSS Grid</title>
<style>
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(2, 1fr);
gap: 10px;
}
.grid-item {
padding: 20px;
background-color: #e4e4e4;
text-align: center;
}
</style>
</head>
<body>
<div class="grid-container">
<div class="grid-item">Elemento 1</div>
<div class="grid-item">Elemento 2</div>
<div class="grid-item">Elemento 3</div>
<div class="grid-item">Elemento 4</div>
<div class="grid-item">Elemento 5</div>
<div class="grid-item">Elemento 6</div>
</div>
</body>
</html>
Explicación del código:
.grid-container: define el contenedor como un grid-contenedor con tres columnas y dos filas, cada elemento ocupa un espacio igual.grid-item: grid-elementos con espacios uniformes y fondo
GO TO FULL VERSION