Semana 2: Estilización Avanzada y

Diseño Responsivo
Created @February 1, 2025 10:43 AM

Tags

Sesión 3: Flex y Grid

Documentación:
https://developer.mozilla.org/es/docs/Web/CSS/CSS_flexible_box_layout/Basic_concepts_of_flexbox

Sesión 3: Flexbox y Grid Layout

Uso de display: flex; y display: grid;

Alineación y distribución de elementos

Media queries para diseño responsivo

En CSS, inicialmente se utilizaba el posicionamiento (static, relative, absolute...), los elementos en línea
o en bloque (y derivados) o la propiedad float para realizar maquetaciones, lo que a grandes rasgos no
dejaba de ser un sistema de creación de diseños bastante tosco que no encajaba con los retos que
tenemos en la actualidad: sistemas de escritorio, dispositivos móviles, múltiples resoluciones, etc...

Flex (también llamado flexbox) es un sistema de elementos flexibles que llega con la idea de olvidar
estos mecanismos y acostumbrarnos a una mecánica más potente, limpia y personalizable, en la que
los elementos HTML se adaptan y colocan automáticamente y es más fácil personalizar los diseños de
una página web.

Semana 2: Estilización Avanzada y Diseño Responsivo 1

 Flex está especialmente diseñado para crear, mediante CSS, estructuras de una
sóla dimensión.

Elementos básicos

<div class="container"> <!-- Flex container -->

<div class="item item-1">1</div> <!-- Flex items -->
<div class="item item-2">2</div>
<div class="item item-3">3</div>
</div>

Debemos ver y gestionar los elementos para el uso de flex, de la siguiente manera:

Contenedor: Es el elemento padre que tendrá en su interior cada uno de los ítems flexibles.
Observa que al contrario que muchas otras estructuras CSS, por norma general, en Flex

establecemos las propiedades al elemento padre.

Eje principal: Los contenedores flexibles tendrán una orientación principal

específica. Por defecto, el eje principal del contenedor flex es en
horizontal (en fila).

Eje secundario: De la misma forma, los contenedores flexibles tendrán una orientación
secundaria, perpendicular a la principal. Si la principal es en
horizontal, la secundaria será en
vertical (y viceversa).

Ítem: Cada uno de los hijos que tendrá el contenedor en su interior.

https://www.youtube.com/watch?
v=esjagdcozX0&embeds_referring_euri=https%3A%2F%2F2.zoppoz.workers.dev%3A443%2Fhttps%2Flenguajecss.com%2F

Semana 2: Estilización Avanzada y Diseño Responsivo 2

 Display

Para activar el modo

flex, utilizaremos sobre el elemento contenedor la propiedad display , y especificaremos el valor flex o
inline-flex (dependiendo de como queramos que se comporte el contenedor):

Tipo de elemento Descripción

Establece un contenedor en línea, similar a inline-block (ocupa solo el

inline-flex
contenido).

Establece un contenedor en bloque, similar a block (ocupa todo el ancho del

flex
padre).

Dirección de los ejes

Existen dos propiedades principales para manipular la dirección y comportamiento de los ítems a lo
largo del eje principal del contenedor. Son las que veremos a continuación:

Propiedad Valor Significado

Cambia la orientación del eje

flex-direction row | row-reverse | column | column-reverse
principal.

Mediante la propiedad
flex-direction podemos modificar la dirección del eje principal del contenedor para que se oriente en

horizontal (valor por defecto) o en vertical. Además, también podemos incluir el sufijo -reverse para
indicar que coloque los ítems en orden inverso.

Valor Descripción
row Establece la dirección del eje principal en horizontal.
row-reverse Establece la dirección del eje principal en horizontal invertido.
column Establece la dirección del eje principal en vertical.

Semana 2: Estilización Avanzada y Diseño Responsivo 3

 column-reverse Establece la dirección del eje principal en vertical invertido.

Propiedades de alineación
justify-content : Se utiliza para alinear los ítems del eje principal (por defecto, el horizontal).

align-items : Usada para alinear los ítems del eje secundario (por defecto, el vertical).

align-content : Se utiliza para alinear el contenido del eje secundario entre líneas (sólo en contenedor
multilinea).

Propiedad Valor & Descripción

> start : Agrupa los ítems al inicio del eje principal.

>
end : Agrupa los ítems al final del eje principal.
>
center : Agrupa los ítems al centro del eje principal.
>
justify-content
space-between : Distribuye los ítems dejando espacio entre ellos.
>
space-around : Distribuye los ítems dejando espacio alrededor de ellos.
>
space-evenly : Distribuye como space-around, pero con un espacio
exactamente igual alrededor de ellos.

> start : Alinea los ítems al inicio del eje secundario.

>
end : Alinea los ítems al final del eje secundario.
>
center : Alinea los ítems al centro del eje secundario.
align-items >
stretch : Alinea los ítems estirándolos de modo que cubran desde el
inicio hasta el final del contenedor.
>
baseline : Alinea los ítems en el contenedor según la base del
contenido de los ítems del contenedor.
align-content > start : Agrupa los ítems al inicio del eje principal.
>
end : Agrupa los ítems al final del eje principal.
>
center : Agrupa los ítems al centro del eje principal.

Semana 2: Estilización Avanzada y Diseño Responsivo 4

 >
space-between : Distribuye los ítems desde el inicio hasta el final.
>
space-around : Distribuye los ítems dejando el mismo espacio a los
lados de cada uno.
>
stretch : Estira los ítems para ocupar de forma equitativa todo el
espacio.

Grid System
Documentación:
https://developer.mozilla.org/es/docs/Learn_web_development/Core/CSS_layout/Grids

El sistema de elementos flexibles

Flex es una gran mejora, sin embargo, está orientado a estructuras de una sola dimensión, y puede ser
laborioso crear estructuras más complejas, por lo que aún necesitamos algo más potente para
estructuras web de varias dimensiones
rápidamente.

Grid CSS nace de esa necesidad, obteniendo las ventajas de ese sistema grid, añadiéndole numerosas
mejoras y características que permiten crear rápidamente cuadrículas flexibles y potentes de forma
prácticamente instantánea con una nueva familia de propiedades CSS.

Semana 2: Estilización Avanzada y Diseño Responsivo 5

 Contenedor: El elemento padre contenedor que definirá la cuadrícula o rejilla.

Ítem: Cada uno de los hijos que contiene la cuadrícula (elemento contenedor).

Celda (grid cell): Cada uno de los cuadritos (unidad mínima) de la cuadrícula.

Area (grid area): Región o conjunto de celdas de la cuadrícula.

Banda (grid track): Banda horizontal o vertical de celdas de la cuadrícula.

Línea (grid line): Separador horizontal o vertical de las celdas de la cuadrícula.

<div class="grid"> <!-- contenedor -->

<div class="item item-1">Item 1</div> <!-- cada uno de los ítems del grid -->
<div class="item item-2">Item 2</div>
<div class="item item-3">Item 3</div>
<div class="item item-4">Item 4</div>
</div>

Display

Para activar la cuadrícula

grid hay que utilizar sobre el elemento contenedor la propiedad display y especificar uno de los dos
valores que queramos utilizar: grid o inline-grid.

Tipo de elemento Descripción

Establece una cuadrícula con ítems en línea, de forma equivalente a

inline-grid
inline-block .

Establece una cuadrícula con ítems en bloque, de forma equivalente a

grid
block .

Semana 2: Estilización Avanzada y Diseño Responsivo 6

 Una vez elegido uno de estos dos valores, y establecida la propiedad
displayal elemento contenedor, hay varias formas de configurar nuestra cuadrícula grid . Al igual que con
Flex , muchas de las propiedades se aplican al contenedor padre, sin embargo, existen algunas que se

aplican sobre los elementos hijos. Las iremos viendo todas detalladamente.

Filas y columnas

En
Grid CSS, la forma principal de definir una cuadrícula es indicar el tamaño de sus filas y sus columnas
de forma explícita. Para ello, sólo tenemos que usar las propiedades CSS grid-template-columns y grid-

template-rows :

Propiedad Valor Descripción

grid-template-columns [col1] [col2] ... Establece el de cada columna (col 1, col 2...).
grid-template-rows [fila1] [fila2] ... Establece el de cada fila (fila 1, fila 2...).

.grid {
display: grid;
grid-template-columns: 50px 300px;
grid-template-rows: 200px 75px;
}

Con la propiedad
display: grid definimos que queremos crear un grid, y mediante las propiedades grid-template-columns y grid-

template-rows definimos los tamaños de las columnas y las filas del mismo. Esto significa que, a priori,

tendríamos una cuadricula o grid de 4 celdas en total:

Semana 2: Estilización Avanzada y Diseño Responsivo 7

 Unidad fracción restante (fr)
Podemos utilizar múltiples unidades (o incluso combinarlas): pixeles, porcentajes, la palabra clave auto
(que obtiene el tamaño restante) o la unidad especial de grid fr (fracción restante), que explicaremos a
continuación.

Se pueden combinar varias unidades diferentes, como por ejemplo píxeles

( px ), fracciones restantes ( fr ), porcentajes ( % ) y otras combinaciones
similares.

Supongamos el siguiente fragmento de código, donde utilizamos las unidades fr :

.grid {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: 2fr 1fr;
}

Este ejemplo, también crea una cuadrícula de 2x2, donde el tamaño de la cuadrícula se divide en:

Dos columnas: Mismo tamaño de ancho para cada una.

Dos filas: La primera fila ocupará el doble ( 2fr ) que la segunda fila ( 1fr ).

Semana 2: Estilización Avanzada y Diseño Responsivo 8

 Filas y columnas repetitivas
En Grid, podemos repetir la estructura de columnas y filas sin necesidad de especificarlas
individualmente con la función repeat() :

.grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(2, 100px);
}

Este ejemplo crea una cuadrícula con 3 columnas del mismo tamaño y 2 filas de 100 píxeles de alto.

Función MinMax
La función minmax(min, max) nos permite definir un rango de tamaños para columnas o filas, asegurando
que no sean demasiado pequeñas ni demasiado grandes.

.grid {
display: grid;
grid-template-columns: repeat(3, minmax(150px, 1fr));
}

Aquí, cada columna tendrá un tamaño mínimo de 150px y crecerá hasta llenar el espacio disponible de
forma proporcional.

Sesión 4: Tailwind y componentes avanzados

Sesión 4: Tailwind CSS y Componentes Avanzados
Introducción a Tailwind CSS y sus clases de utilidad

Creación de componentes reutilizables

Semana 2: Estilización Avanzada y Diseño Responsivo 9

 Comparación Bootstrap vs Tailwind

¿Qué es Tailwind?
Es framework CSS basado en utilidades. A diferencia de Bootstrap que implementa componentes
predefinidos, los suyos se construyen desde cero con clases pequeñas.

Otras diferencias con Bootstrap

3.1. Diferencias Clave

Característica Bootstrap Tailwind CSS

Filosofía Basado en componentes predefinidos Utility-First

Personalización Necesita sobrescribir estilos 100% personalizable con clases de utilidad

Tamaño Más pesado (CSS + JS) Ligero, solo CSS

Aprendizaje Más rápido para principiantes Requiere adaptación al enfoque Utility-First

Flexibilidad Predefinido, rápido pero rígido Altamente personalizable

Instalación y Configuración
Instalación mediante CDN y npm.

Generación del archivo tailwind.config.js y personalización.

Integración con frameworks como React, Vue y Angular.

Clases de Utilidad en Tailwind CSS

…

Creación de Componentes Reutilizables

Proyecto Semana 2:
Mejorando el Portafolio

Diseñar una landing page con Flexbox, Grid y Tailwind para que se adapte a diferentes dispositivos.

Semana 2: Estilización Avanzada y Diseño Responsivo 10