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

CSS Flexbox

Següent ►
►

El CSS Flexbox és un model de disseny que permet crear dissenys complexos i flexibles de manera senzilla i eficient. És especialment útil per a dissenys responsius, ja que facilita l'alineació i distribució dels elements dins d'un contenidor, independentment de la seva mida.

Conceptes Clau de Flexbox

  1. Contenidor Flex: L'element que conté els elements flexibles. Es defineix establint la propietat display a flex o inline-flex.
  2. Elements Flex: Els elements fills directes del contenidor flex. Aquests elements es distribueixen i alineen dins del contenidor segons les propietats de Flexbox.

Propietats del Contenidor Flex

  • display: Defineix el contenidor com a flex. Exemple: display: flex;.
  • flex-direction: Defineix la direcció dels elements flexibles dins del contenidor. Valors comuns:
    • row: Els elements es disposen en fila (horitzontalment).
    • column: Els elements es disposen en columna (verticalment).
  • justify-content: Alinea els elements flexibles al llarg de l'eix principal. Valors comuns:
    • flex-start: Alinea els elements al començament.
    • center: Alinea els elements al centre.
    • space-between: Distribueix els elements amb espai entre ells.
  • align-items: Alinea els elements flexibles al llarg de l'eix transversal. Valors comuns:
    • flex-start: Alinea els elements al començament de l'eix transversal.
    • center: Alinea els elements al centre de l'eix transversal.
    • stretch: Estira els elements per omplir el contenidor.

Propietats dels Elements Flex

  • flex-grow: Defineix la capacitat d'un element per créixer respecte als altres elements flexibles. Exemple: flex-grow: 1;.
  • flex-shrink: Defineix la capacitat d'un element per reduir-se respecte als altres elements flexibles. Exemple: flex-shrink: 1;.
  • flex-basis: Defineix la mida inicial d'un element abans que l'espai extra es distribueixi. Exemple: flex-basis: 100px;.

Exemple Pràctic

A continuació, es mostra un exemple pràctic d'ús de Flexbox:

<!DOCTYPE html>
<html lang="ca">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Exemple de Flexbox</title>
    <style>
        .contenidor {
            display: flex;
            flex-direction: row;
            justify-content: space-between;
            align-items: center;
            height: 200px;
            border: 1px solid #ccc;
        }
        .element {
            background-color: #f0f0f0;
            padding: 20px;
            margin: 10px;
            flex-grow: 1;
        }
    </style>
</head>
<body>
    <div class="contenidor">
        <div class="element">Element 1</div>
        <div class="element">Element 2</div>
        <div class="element">Element 3</div>
    </div>
</body>
</html>

Explicació del Codi

  • Contenidor: El div amb la classe contenidor és el contenidor flex. Té les propietats display: flex;, flex-direction: row;, justify-content: space-between; i align-items: center;, que distribueixen els elements en fila, amb espai entre ells i centrats verticalment.
  • Elements: Els div amb la classe element són els elements flexibles. Tenen la propietat flex-grow: 1;, que permet que cada element creixi per omplir l'espai disponible de manera equitativa.

Exercici Pràctic

Exercici: Crea un disseny utilitzant Flexbox on els elements es disposin en columna i estiguin centrats tant horitzontalment com verticalment dins del contenidor.

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 Flexbox</title>
    <style>
        .contenidor {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            height: 300px;
            border: 1px solid #ccc;
        }
        .element {
            background-color: #e0e0e0;
            padding: 15px;
            margin: 5px;
        }
    </style>
</head>
<body>
    <div class="contenidor">
        <div class="element">Element A</div>
        <div class="element">Element B</div>
        <div class="element">Element C</div>
    </div>
</body>
</html>

Explicació de la Solució

  • Contenidor: El div amb la classe contenidor utilitza flex-direction: column; per disposar els elements en columna. Les propietats justify-content: center; i align-items: center; centren els elements tant horitzontalment com verticalment.

Conclusió

El CSS Flexbox és una eina poderosa per crear dissenys responsius i flexibles. Amb les seves propietats, pots controlar fàcilment la distribució, alineació i mida dels elements dins d'un contenidor. Practicar amb Flexbox et permetrà crear dissenys més eficients i adaptables a diferents mides de pantalla. En el següent tema, explorarem el Disseny de Graella CSS, que complementa les capacitats de Flexbox per a dissenys més complexos.

◄ Anterior
◄
Següent ►
►
El Projecte | Sobre nosaltres | Contribuir | Donacions | Llicència
© Copyright 2024. Tots els drets reservats