El Projecte | Sobre nosaltres | Contribuir | Donacions | Llicència
HOME Els meus cursos Finalitzats
◄ Anterior
◄

Disseny Responsiu amb Flexbox

Següent ►
►

En aquest tema, aprendrem com utilitzar Flexbox per crear dissenys responsius que s'adaptin a diferents mides de pantalla. Flexbox és una eina poderosa per a la creació de dissenys flexibles i dinàmics, i és especialment útil per a la construcció de llocs web que es veuen bé tant en dispositius mòbils com en pantalles grans.

Conceptes Clau

  1. Contenidor Flex i Elements Flex

  • Contenidor Flex: L'element pare que conté els elements flexibles.
  • Elements Flex: Els elements fills dins del contenidor flex.

  1. Propietats del Contenidor Flex

  • display: flex: Converteix un element en un contenidor flex.
  • flex-direction: Defineix la direcció dels elements flex (row, row-reverse, column, column-reverse).
  • flex-wrap: Permet que els elements flex es moguin a la següent línia si no hi ha prou espai (nowrap, wrap, wrap-reverse).
  • justify-content: Alinea els elements flex horitzontalment (flex-start, flex-end, center, space-between, space-around, space-evenly).
  • align-items: Alinea els elements flex verticalment (flex-start, flex-end, center, baseline, stretch).
  • align-content: Alinea les línies de flex (flex-start, flex-end, center, space-between, space-around, stretch).

  1. Propietats dels Elements Flex

  • flex-grow: Defineix la capacitat d'un element flex per créixer.
  • flex-shrink: Defineix la capacitat d'un element flex per encongir-se.
  • flex-basis: Defineix la mida inicial d'un element flex.
  • align-self: Alinea un element flex individualment (auto, flex-start, flex-end, center, baseline, stretch).

Exemple Pràctic

HTML

<!DOCTYPE html>
<html lang="ca">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Disseny Responsiu amb Flexbox</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="container">
        <div class="item">1</div>
        <div class="item">2</div>
        <div class="item">3</div>
        <div class="item">4</div>
        <div class="item">5</div>
        <div class="item">6</div>
    </div>
</body>
</html>

CSS

/* Estils bàsics */
body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background-color: #f0f0f0;
}

.container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    width: 90%;
    max-width: 1200px;
    background-color: #fff;
    padding: 20px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.item {
    background-color: #4CAF50;
    color: white;
    padding: 20px;
    margin: 10px;
    flex: 1 1 200px; /* flex-grow: 1, flex-shrink: 1, flex-basis: 200px */
    text-align: center;
    border-radius: 5px;
}

/* Estils responsius */
@media (max-width: 768px) {
    .container {
        flex-direction: column;
        align-items: center;
    }
}

Explicació del Codi

  1. HTML:

    • Hem creat una estructura bàsica amb un contenidor .container que conté sis elements .item.

  2. CSS:

    • Contenidor Flex: Hem aplicat display: flex a .container per convertir-lo en un contenidor flex.
    • flex-wrap: Hem utilitzat flex-wrap: wrap per permetre que els elements es moguin a la següent línia si no hi ha prou espai.
    • justify-content: Hem utilitzat justify-content: space-around per distribuir els elements amb espai al voltant.
    • Propietats dels Elements Flex: Hem utilitzat flex: 1 1 200px per permetre que els elements creixin i es redueixin segons sigui necessari, amb una mida inicial de 200px.
    • Estils Responsius: Hem utilitzat una consulta de mitjans per canviar la direcció del contenidor a column i alinear els elements al centre quan la mida de la pantalla és inferior a 768px.

Exercici Pràctic

Objectiu

Crear un disseny de galeria d'imatges responsiu utilitzant Flexbox.

Instruccions

  1. Crea un fitxer HTML amb una estructura de galeria.
  2. Aplica estils CSS per fer que la galeria sigui responsiva utilitzant Flexbox.

HTML

<!DOCTYPE html>
<html lang="ca">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Galeria Responsiva</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="gallery">
        <div class="gallery-item">1</div>
        <div class="gallery-item">2</div>
        <div class="gallery-item">3</div>
        <div class="gallery-item">4</div>
        <div class="gallery-item">5</div>
        <div class="gallery-item">6</div>
    </div>
</body>
</html>

CSS

body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background-color: #f0f0f0;
}

.gallery {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    width: 90%;
    max-width: 1200px;
    background-color: #fff;
    padding: 20px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.gallery-item {
    background-color: #2196F3;
    color: white;
    padding: 20px;
    margin: 10px;
    flex: 1 1 200px;
    text-align: center;
    border-radius: 5px;
}

@media (max-width: 768px) {
    .gallery {
        flex-direction: column;
        align-items: center;
    }
}

Solució

  1. Hem creat una estructura HTML amb una classe .gallery que conté diversos elements .gallery-item.
  2. Hem aplicat estils CSS similars als de l'exemple anterior per fer que la galeria sigui responsiva.

Resum

En aquest tema, hem après com utilitzar Flexbox per crear dissenys responsius. Hem vist com les propietats del contenidor flex i els elements flex poden ajudar a crear dissenys flexibles que s'adapten a diferents mides de pantalla. També hem practicat amb un exemple pràctic i un exercici per reforçar els conceptes apresos.

En el següent mòdul, explorarem CSS Grid, una altra eina poderosa per a la creació de dissenys responsius i complexos.

◄ Anterior
◄
Següent ►
►

Domini del CSS: De Principiant a Avançat

Mòdul 1: Introducció al CSS

Mòdul 2: Estilització de Text i Fonts

Mòdul 3: Model de Caixa i Disseny

Mòdul 4: Posicionament i Flotació

Mòdul 5: Flexbox

Mòdul 6: CSS Grid

Mòdul 7: Tècniques Avançades de CSS

Mòdul 8: Disseny Responsiu

Mòdul 9: Preprocessadors i Frameworks

Mòdul 10: Millors Pràctiques i Optimització

Mòdul 11: Projecte: Construir un Lloc Web Responsiu

El Projecte | Sobre nosaltres | Contribuir | Donacions | Llicència
© Copyright 2024. Tots els drets reservats