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

Propietats del Contenidor Flex

Següent ►
►

En aquest tema, explorarem les propietats del contenidor Flexbox que ens permeten controlar el comportament dels elements fills dins del contenidor. Flexbox és una eina poderosa per crear dissenys flexibles i responsius. Les propietats del contenidor Flexbox ens ajuden a alinear i distribuir els elements de manera eficient.

  1. display: flex

La propietat display: flex és la que converteix un element en un contenidor flex. Aquesta propietat activa el model de Flexbox per a l'element i els seus fills.

.container {
    display: flex;
}

  1. flex-direction

La propietat flex-direction defineix la direcció en què els elements fills es col·loquen dins del contenidor flex. Les opcions són:

  • row (per defecte): Els elements es col·loquen en una fila horitzontal.
  • row-reverse: Els elements es col·loquen en una fila horitzontal, però en ordre invers.
  • column: Els elements es col·loquen en una columna vertical.
  • column-reverse: Els elements es col·loquen en una columna vertical, però en ordre invers.
.container {
    display: flex;
    flex-direction: row; /* o row-reverse, column, column-reverse */
}

  1. flex-wrap

La propietat flex-wrap controla si els elements fills es col·loquen en una sola línia o si poden envoltar-se en múltiples línies. Les opcions són:

  • nowrap (per defecte): Els elements es col·loquen en una sola línia.
  • wrap: Els elements es poden envoltar en múltiples línies.
  • wrap-reverse: Els elements es poden envoltar en múltiples línies, però en ordre invers.
.container {
    display: flex;
    flex-wrap: wrap; /* o nowrap, wrap-reverse */
}

  1. flex-flow

La propietat flex-flow és una abreviatura per a les propietats flex-direction i flex-wrap. Permet definir ambdues propietats en una sola línia.

.container {
    display: flex;
    flex-flow: row wrap; /* flex-direction i flex-wrap */
}

  1. justify-content

La propietat justify-content alinea els elements fills al llarg de l'eix principal (definit per flex-direction). Les opcions són:

  • flex-start (per defecte): Els elements s'alineen al començament de l'eix principal.
  • flex-end: Els elements s'alineen al final de l'eix principal.
  • center: Els elements s'alineen al centre de l'eix principal.
  • space-between: Els elements es distribueixen uniformement amb espai entre ells.
  • space-around: Els elements es distribueixen uniformement amb espai al voltant d'ells.
  • space-evenly: Els elements es distribueixen uniformement amb espai igual entre ells.
.container {
    display: flex;
    justify-content: center; /* o flex-start, flex-end, space-between, space-around, space-evenly */
}

  1. align-items

La propietat align-items alinea els elements fills al llarg de l'eix transversal (perpendicular a l'eix principal). Les opcions són:

  • stretch (per defecte): Els elements s'estiren per omplir el contenidor.
  • flex-start: Els elements s'alineen al començament de l'eix transversal.
  • flex-end: Els elements s'alineen al final de l'eix transversal.
  • center: Els elements s'alineen al centre de l'eix transversal.
  • baseline: Els elements s'alineen segons la seva línia base de text.
.container {
    display: flex;
    align-items: center; /* o stretch, flex-start, flex-end, baseline */
}

  1. align-content

La propietat align-content alinea les línies de l'element flex quan hi ha espai extra a l'eix transversal. Aquesta propietat només té efecte quan hi ha múltiples línies de flex (quan flex-wrap és wrap o wrap-reverse). Les opcions són:

  • stretch (per defecte): Les línies s'estiren per omplir l'espai disponible.
  • flex-start: Les línies s'alineen al començament de l'eix transversal.
  • flex-end: Les línies s'alineen al final de l'eix transversal.
  • center: Les línies s'alineen al centre de l'eix transversal.
  • space-between: Les línies es distribueixen uniformement amb espai entre elles.
  • space-around: Les línies es distribueixen uniformement amb espai al voltant d'elles.
  • space-evenly: Les línies es distribueixen uniformement amb espai igual entre elles.
.container {
    display: flex;
    align-content: space-between; /* o stretch, flex-start, flex-end, center, space-around, space-evenly */
}

Exemple Pràctic

A continuació, es mostra un exemple pràctic que utilitza diverses propietats del contenidor Flexbox per crear un disseny flexible:

<!DOCTYPE html>
<html lang="ca">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Exemple de Contenidor Flex</title>
    <style>
        .container {
            display: flex;
            flex-direction: row;
            flex-wrap: wrap;
            justify-content: space-around;
            align-items: center;
            align-content: space-between;
            height: 300px;
            border: 2px solid #000;
        }
        .item {
            background-color: #4CAF50;
            color: white;
            padding: 20px;
            margin: 10px;
            text-align: center;
            flex: 1 1 100px; /* flex-grow, flex-shrink, flex-basis */
        }
    </style>
</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>
</body>
</html>

Exercici Pràctic

Exercici: Crea un contenidor flex que contingui quatre elements. Utilitza les propietats del contenidor flex per alinear els elements de la següent manera:

  • Els elements han d'estar en una fila.
  • Els elements han d'estar centrats horitzontalment i verticalment.
  • Els elements han de tenir espai igual entre ells.

Solució:

<!DOCTYPE html>
<html lang="ca">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Exercici de Contenidor Flex</title>
    <style>
        .container {
            display: flex;
            flex-direction: row;
            justify-content: space-between;
            align-items: center;
            height: 200px;
            border: 2px solid #000;
        }
        .item {
            background-color: #2196F3;
            color: white;
            padding: 20px;
            text-align: center;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="item">A</div>
        <div class="item">B</div>
        <div class="item">C</div>
        <div class="item">D</div>
    </div>
</body>
</html>

Conclusió

En aquest tema, hem après sobre les propietats del contenidor Flexbox i com utilitzar-les per controlar l'alineació i la distribució dels elements fills. Aquestes propietats són fonamentals per crear dissenys flexibles i responsius. En el proper tema, explorarem les propietats dels elements flex per obtenir un control més detallat sobre el comportament dels elements dins del contenidor flex.

◄ 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