CSS Grid vs Flexbox

De MediaWiki
Ir a la navegación Ir a la búsqueda

Introdución

Os elementos flotantes e o posicionamiento foron durante moito timpo as únicas ferramientas fiables para crear deseños CSS cuhna alta compatibilidade entre navegadores. Cumplen o seu propósito, pero teñen unha funcionalidade limitada coa que resulta difícil obter un deseño de páxina sinxelo e flexible que cumpla con unos requisitos coma os seguintes:

  • Centrar verticalmente un bloque de contedo dentro do seu elemento pai.
  • Facer que todos os elementos secundarios dun contenedor ocupen unha cantidade igual do ancho/alto disponible, independentemente do ancho/alto que haiba disponible.
  • Facer que todos os elementos nuhna distribución de columnas múltiples adopten a mesma altura incluso se conteñen cantidades diferentes de contido.

Desde 2016 podemos usar os novos valores flex e inline-flex en substitución de block ou inline-block para crear deseños flexibles. Os elementos flexbox facilitan moito as tarefas de distribución de elementos dentro da páxina.

Algunhas das súas ventaxas son:

  • Xestión da alineación das caixas
  • Centrado horizontal e vertical
  • Altos de caixa similares
  • Fondos de coles uniformes

También dispoñemos de display:grid para colocar os elementos usando unha rejilla.

Referencias