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

Crear Dissenys amb Flexbox

Següent ►
►

En aquest tema, aprendrem a utilitzar Flexbox per crear dissenys web flexibles i responsius. Flexbox és una eina poderosa que simplifica la creació de dissenys complexos amb CSS. Ens centrarem en les propietats clau de Flexbox i veurem exemples pràctics per entendre com aplicar-les en situacions reals.

Conceptes Clau de Flexbox

Abans de començar amb els exemples pràctics, és important comprendre alguns conceptes clau de Flexbox:

  1. Contenidor Flex (Flex Container): L'element pare que conté els elements flexibles.
  2. Elements Flex (Flex Items): Els elements fills directes del contenidor flex.
  3. Eixos de Flexbox:
    • Eix Principal (Main Axis): L'eix principal al llarg del qual es distribueixen els elements flexibles.
    • Eix Creuat (Cross Axis): L'eix perpendicular a l'eix principal.

Propietats del Contenidor Flex

Les propietats del contenidor flex ens permeten definir com es distribueixen i s'alineen els elements flexibles dins del contenidor.

display: flex

Aquesta propietat converteix un element en un contenidor flex.

.container {
  display: flex;
}

flex-direction

Defineix la direcció dels elements flexibles dins del contenidor.

  • row (per defecte): Els elements es disposen en una fila horitzontal.
  • column: Els elements es disposen en una columna vertical.
  • row-reverse: Els elements es disposen en una fila horitzontal inversa.
  • column-reverse: Els elements es disposen en una columna vertical inversa.
.container {
  display: flex;
  flex-direction: row; /* o column, row-reverse, column-reverse */
}

justify-content

Alinea els elements flexibles al llarg de l'eix principal.

  • 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.
.container {
  display: flex;
  justify-content: center; /* o flex-start, flex-end, space-between, space-around */
}

align-items

Alinea els elements flexibles al llarg de l'eix creuat.

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

flex-wrap

Defineix si els elements flexibles es poden ajustar a múltiples línies.

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

Propietats dels Elements Flex

Les propietats dels elements flex ens permeten definir com es comporten els elements individuals dins del contenidor flex.

flex-grow

Defineix la capacitat d'un element per créixer en proporció als altres elements flexibles.

.item {
  flex-grow: 1; /* L'element creixerà per omplir l'espai disponible */
}

flex-shrink

Defineix la capacitat d'un element per reduir-se en proporció als altres elements flexibles.

.item {
  flex-shrink: 1; /* L'element es reduirà per ajustar-se a l'espai disponible */
}

flex-basis

Defineix la mida inicial d'un element abans que es distribueixi l'espai restant.

.item {
  flex-basis: 100px; /* L'element tindrà una mida inicial de 100px */
}

align-self

Alinea un element individualment al llarg de l'eix creuat, sobreescrivint align-items del contenidor.

  • auto (per defecte): L'element segueix l'alineació definida per align-items.
  • flex-start: L'element s'alinea al començament de l'eix creuat.
  • flex-end: L'element s'alinea al final de l'eix creuat.
  • center: L'element s'alinea al centre de l'eix creuat.
  • baseline: L'element s'alinea segons la seva línia base.
  • stretch: L'element s'estira per omplir l'eix creuat.
.item {
  align-self: center; /* o flex-start, flex-end, stretch, baseline */
}

Exemple Pràctic: Crear un Disseny de Galeria

Ara que hem vist les propietats clau de Flexbox, crearem un disseny de galeria d'imatges utilitzant Flexbox.

HTML

<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>

CSS

.gallery {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
}

.gallery-item {
  background-color: #f0f0f0;
  border: 1px solid #ccc;
  flex-basis: calc(33.333% - 20px);
  margin: 10px;
  text-align: center;
  padding: 20px;
  box-sizing: border-box;
}

Explicació

  1. Contenidor Flex: La classe .gallery és el contenidor flex amb display: flex, flex-wrap: wrap per permetre que els elements es distribueixin en múltiples línies, i justify-content: space-around per distribuir els elements amb espai al voltant.
  2. Elements Flex: La classe .gallery-item defineix els elements flexibles amb flex-basis: calc(33.333% - 20px) per ajustar la mida inicial de cada element, i margin: 10px per afegir espai entre els elements.

Aquest codi crea una galeria d'imatges responsiva on cada element ocupa aproximadament un terç de l'ample del contenidor, amb espai al voltant de cada element.

Exercici Pràctic

Crea un disseny de capçalera amb Flexbox que contingui un logotip a l'esquerra, un menú de navegació al centre i un botó de cerca a la dreta.

HTML

<header class="header">
  <div class="logo">Logo</div>
  <nav class="nav">
    <a href="#">Home</a>
    <a href="#">About</a>
    <a href="#">Services</a>
    <a href="#">Contact</a>
  </nav>
  <button class="search-button">Search</button>
</header>

CSS

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 20px;
  background-color: #333;
  color: #fff;
}

.logo {
  font-size: 1.5em;
}

.nav a {
  margin: 0 10px;
  color: #fff;
  text-decoration: none;
}

.search-button {
  background-color: #555;
  color: #fff;
  border: none;
  padding: 10px 20px;
  cursor: pointer;
}

Solució

  1. Contenidor Flex: La classe .header és el contenidor flex amb display: flex, justify-content: space-between per distribuir els elements amb espai entre ells, i align-items: center per alinear els elements al centre de l'eix creuat.
  2. Elements Flex: Les classes .logo, .nav, i .search-button defineixen els elements flexibles dins del contenidor.

Aquest codi crea una capçalera responsiva amb un logotip a l'esquerra, un menú de navegació al centre i un botó de cerca a la dreta.

Conclusió

Flexbox és una eina poderosa per crear dissenys web flexibles i responsius. Amb les propietats clau de Flexbox, podem controlar la distribució, alineació i mida dels elements dins d'un contenidor flex. Practicar amb exemples reals ens ajudarà a comprendre millor com aplicar Flexbox en els nostres projectes web.

◄ 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