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

Propietats dels Elements Flex

Següent ►
►

En aquest tema, explorarem les propietats que es poden aplicar als elements fills d'un contenidor Flexbox. Aquestes propietats permeten controlar com es distribueixen i s'alineen els elements dins del contenidor. Les propietats principals dels elements flex són:

  1. order
  2. flex-grow
  3. flex-shrink
  4. flex-basis
  5. flex
  6. align-self

  1. Propietat order

La propietat order determina l'ordre en què es disposen els elements dins del contenidor flex. Per defecte, tots els elements tenen un valor order de 0. Els elements amb un valor order més baix apareixen abans que els elements amb un valor més alt.

.item1 {
  order: 2;
}

.item2 {
  order: 1;
}

.item3 {
  order: 3;
}

En aquest exemple, l'element .item2 apareixerà primer, seguit de .item1 i finalment .item3.

  1. Propietat flex-grow

La propietat flex-grow especifica la capacitat d'un element per créixer en proporció als altres elements flexibles dins del mateix contenidor. El valor per defecte és 0 (no creix).

.item1 {
  flex-grow: 1;
}

.item2 {
  flex-grow: 2;
}

.item3 {
  flex-grow: 1;
}

En aquest exemple, l'element .item2 ocuparà el doble d'espai que .item1 i .item3.

  1. Propietat flex-shrink

La propietat flex-shrink especifica la capacitat d'un element per reduir-se en proporció als altres elements flexibles dins del mateix contenidor. El valor per defecte és 1 (pot reduir-se).

.item1 {
  flex-shrink: 1;
}

.item2 {
  flex-shrink: 2;
}

.item3 {
  flex-shrink: 1;
}

En aquest exemple, l'element .item2 es reduirà el doble que .item1 i .item3 si l'espai disponible és limitat.

  1. Propietat flex-basis

La propietat flex-basis especifica la mida inicial d'un element abans que es distribueixi l'espai disponible. Pot acceptar valors com px, %, em, etc.

.item1 {
  flex-basis: 100px;
}

.item2 {
  flex-basis: 200px;
}

.item3 {
  flex-basis: 150px;
}

En aquest exemple, l'element .item1 tindrà una mida inicial de 100 píxels, .item2 de 200 píxels i .item3 de 150 píxels.

  1. Propietat flex

La propietat flex és una abreviatura per a les propietats flex-grow, flex-shrink i flex-basis. La sintaxi és flex: [flex-grow] [flex-shrink] [flex-basis];.

.item1 {
  flex: 1 1 100px;
}

.item2 {
  flex: 2 1 200px;
}

.item3 {
  flex: 1 1 150px;
}

En aquest exemple, l'element .item1 creixerà i es reduirà amb una mida inicial de 100 píxels, .item2 creixerà el doble que .item1 i .item3 amb una mida inicial de 200 píxels, i .item3 tindrà una mida inicial de 150 píxels.

  1. Propietat align-self

La propietat align-self permet alinear un element individualment dins del contenidor flex. Pot sobreescriure l'alineació establerta per align-items al contenidor. Els valors possibles són auto, flex-start, flex-end, center, baseline i stretch.

.item1 {
  align-self: flex-start;
}

.item2 {
  align-self: center;
}

.item3 {
  align-self: flex-end;
}

En aquest exemple, l'element .item1 s'alinearà a l'inici del contenidor, .item2 al centre i .item3 al final.

Exercicis Pràctics

Exercici 1: Ordenar Elements

  1. Crea un contenidor flex amb tres elements.
  2. Utilitza la propietat order per fer que el segon element aparegui primer, el tercer segon i el primer últim.
<!DOCTYPE html>
<html lang="ca">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Exercici 1</title>
  <style>
    .container {
      display: flex;
    }
    .item1 {
      order: 3;
    }
    .item2 {
      order: 1;
    }
    .item3 {
      order: 2;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="item1">Element 1</div>
    <div class="item2">Element 2</div>
    <div class="item3">Element 3</div>
  </div>
</body>
</html>

Exercici 2: Flex-Grow i Flex-Shrink

  1. Crea un contenidor flex amb tres elements.
  2. Utilitza les propietats flex-grow i flex-shrink per fer que el primer element creixi el doble que els altres dos, i que el segon element es redueixi el doble que els altres dos.
<!DOCTYPE html>
<html lang="ca">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Exercici 2</title>
  <style>
    .container {
      display: flex;
    }
    .item1 {
      flex-grow: 2;
      flex-shrink: 1;
    }
    .item2 {
      flex-grow: 1;
      flex-shrink: 2;
    }
    .item3 {
      flex-grow: 1;
      flex-shrink: 1;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="item1">Element 1</div>
    <div class="item2">Element 2</div>
    <div class="item3">Element 3</div>
  </div>
</body>
</html>

Exercici 3: Flex-Basis i Align-Self

  1. Crea un contenidor flex amb tres elements.
  2. Utilitza la propietat flex-basis per establir mides inicials diferents per a cada element.
  3. Utilitza la propietat align-self per alinear cada element de manera diferent dins del contenidor.
<!DOCTYPE html>
<html lang="ca">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Exercici 3</title>
  <style>
    .container {
      display: flex;
      height: 200px;
    }
    .item1 {
      flex-basis: 100px;
      align-self: flex-start;
    }
    .item2 {
      flex-basis: 200px;
      align-self: center;
    }
    .item3 {
      flex-basis: 150px;
      align-self: flex-end;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="item1">Element 1</div>
    <div class="item2">Element 2</div>
    <div class="item3">Element 3</div>
  </div>
</body>
</html>

Conclusió

En aquesta secció, hem après sobre les propietats dels elements flexibles dins d'un contenidor Flexbox. Aquestes propietats ens permeten controlar l'ordre, el creixement, la reducció, la mida inicial i l'alineació dels elements flexibles. Amb aquests coneixements, podem crear dissenys més dinàmics i adaptables. En el proper tema, explorarem com crear dissenys complets utilitzant Flexbox.

◄ 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