El Projecte | Sobre nosaltres | Contribuir | Donacions | Llicència

HOME

Flexbox (Flexible Box Layout) és un mètode de disseny de CSS que permet distribuir espai entre elements d'una interfície i alinear-los de manera més eficient. Flexbox és especialment útil per crear dissenys responsius i adaptables, ja que facilita la distribució dels elements en una pàgina web, independentment de la mida de la pantalla.

Objectius del Mòdul

En aquest mòdul, aprendràs:

Què és Flexbox i per què és útil.
Com activar Flexbox en un contenidor.
Les propietats bàsiques de Flexbox per al contenidor i els elements flexibles.
Com utilitzar Flexbox per crear dissenys flexibles i responsius.

Què és Flexbox?

Flexbox és un model de disseny unidimensional que permet distribuir espai entre els elements d'un contenidor i alinear-los de manera més eficient. A diferència del model de caixa tradicional, Flexbox està dissenyat per gestionar la distribució dels elements tant en la direcció principal (horitzontal o vertical) com en la direcció transversal.

Avantatges de Flexbox

Distribució Automàtica: Flexbox distribueix automàticament l'espai entre els elements, fent que sigui més fàcil crear dissenys equilibrats.
Alineació Flexible: Permet alinear els elements de manera vertical i horitzontal amb facilitat.
Dissenys Responsius: Flexbox facilita la creació de dissenys que s'adapten a diferents mides de pantalla.
Reordenació Dinàmica: Els elements es poden reordenar fàcilment sense canviar l'HTML.

Activar Flexbox

Per activar Flexbox en un contenidor, has d'establir la propietat display a flex o inline-flex.

.container {
  display: flex;
}

Exemple Pràctic

<!DOCTYPE html>
<html lang="ca">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Exemple Flexbox</title>
  <style>
    .container {
      display: flex;
      border: 1px solid #000;
      padding: 10px;
    }
    .item {
      background-color: #f0f0f0;
      margin: 5px;
      padding: 20px;
      border: 1px solid #ccc;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="item">Element 1</div>
    <div class="item">Element 2</div>
    <div class="item">Element 3</div>
  </div>
</body>
</html>

En aquest exemple, el contenidor .container utilitza Flexbox per distribuir els seus elements fills .item.

Propietats del Contenidor Flex

`flex-direction`

Defineix la direcció principal en la qual els elements flexibles es col·loquen dins del contenidor.

row (per defecte): Els elements es col·loquen en una fila horitzontal.
row-reverse: Els elements es col·loquen en una fila horitzontal inversa.
column: Els elements es col·loquen en una columna vertical.
column-reverse: Els elements es col·loquen en una columna vertical inversa.

.container {
  display: flex;
  flex-direction: row;
}

`justify-content`

Alinea els elements al llarg de la direcció principal.

flex-start (per defecte): Els elements s'alineen al començament del contenidor.
flex-end: Els elements s'alineen al final del contenidor.
center: Els elements s'alineen al centre del contenidor.
space-between: Els elements es distribueixen amb espai igual entre ells.
space-around: Els elements es distribueixen amb espai igual al voltant d'ells.

.container {
  display: flex;
  justify-content: center;
}

`align-items`

Alinea els elements al llarg de la direcció transversal.

stretch (per defecte): Els elements s'estiren per omplir el contenidor.
flex-start: Els elements s'alineen al començament del contenidor.
flex-end: Els elements s'alineen al final del contenidor.
center: Els elements s'alineen al centre del contenidor.
baseline: Els elements s'alineen segons la seva línia base.

.container {
  display: flex;
  align-items: center;
}

Exercici Pràctic

Objectiu

Crear un disseny simple utilitzant Flexbox per alinear tres elements en una fila i centrar-los tant horitzontalment com verticalment.

Instruccions

Crea un fitxer HTML amb una estructura bàsica.
Afegeix un contenidor amb la classe container i tres elements fills amb la classe item.
Utilitza Flexbox per alinear els elements al centre 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 Flexbox</title>
  <style>
    .container {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100vh;
      border: 1px solid #000;
    }
    .item {
      background-color: #f0f0f0;
      margin: 5px;
      padding: 20px;
      border: 1px solid #ccc;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="item">Element 1</div>
    <div class="item">Element 2</div>
    <div class="item">Element 3</div>
  </div>
</body>
</html>

Resum

En aquesta introducció a Flexbox, hem après què és Flexbox, com activar-lo en un contenidor i les propietats bàsiques per alinear i distribuir elements dins d'un contenidor flexible. Hem vist exemples pràctics i hem realitzat un exercici per reforçar els conceptes apresos. En els següents temes, aprofundirem en les propietats del contenidor Flex i dels elements Flex per crear dissenys més complexos i responsius.

Introducció a Flexbox

Objectius del Mòdul

Què és Flexbox?

Avantatges de Flexbox

Activar Flexbox

Exemple Pràctic

Propietats del Contenidor Flex

`flex-direction`

`justify-content`

`align-items`

Exercici Pràctic

Objectiu

Instruccions

Solució

Resum

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