Skip to main content

Elements Bloc, Grid i Flexbox

En aquest capítol veurem la diferència entre elements en bloc i en línia, i aprofundirem en dos sistemes de layout molt potents de CSS: Grid Layout i Flexbox.

Elements en bloc vs en línia​

Elements en bloc​

  • Ocupen tot l’ample disponible del seu contenidor
  • Comencen en una nova línia
  • Poden contindre altres elements en bloc o en línia

Exemples: div, section, article, main, header, footer, p, ul, ol, table, h1–h6

display: block;

Elements en línia​

  • No comencen en nova línia
  • Només ocupen l’espai necessari
  • No poden contenir elements en bloc

Exemples: a, span, strong, em, code, abbr, input, label, button, select, textarea

display: inline;

CSS Grid Layout​

Sistema de disseny bidimensional (files i columnes).

Propietats del contenidor​

display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: auto auto;
gap: 20px;

Posicionar elements fills​

.grid-item {
  grid-column: 1 / 3;
  grid-row: 2 / 3;
}

Altres propietats:

  • grid-auto-rows, grid-auto-columns
  • order
  • justify-items, align-items (nivell general)
  • justify-self, align-self (nivell individual)

Exemple d’estructura bàsica​

<div class="grid">
  <div class="box">1</div>
  <div class="box">2</div>
  <div class="box">3</div>
</div>
.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

Flexbox​

Sistema de layout unidimensional (fila o columna).

Contenidor Flex​

display: flex;
flex-direction: row; /* o column */
flex-wrap: wrap;
gap: 10px;
justify-content: center;
align-items: center;

Elements fills​

.flex-item {
  order: 2;
  flex-grow: 1;
  align-self: flex-end;
}

Propietats Flex més importants​

PropietatDescripció
flex-directionDirecció (row o column)
flex-wrapSi els elements poden saltar de línia
justify-contentAlineació horitzontal
align-itemsAlineació vertical (dins línia)
align-contentAlineació de múltiples línies
gapEspai entre elements
orderOrdre dels fills
flex-growOcupació proporcional
align-selfAlineació individual

Diferència align-items vs align-content​

  • align-items: alineació d’elements dins la mateixa línia
  • align-content: alineació de línies senceres (funciona si flex-wrap ≠ nowrap)

Recursos pràctics​

Aquest capítol et permet dominar dos sistemes moderns de layout: Grid (bidimensional) i Flexbox (unidimensional), per crear estructures complexes, responsives i mantingudes.