Diferencias entre Flexbox y CSS Grid

PROPIEDADES

Su felicidad al iniciar la clase contagia xD

Flexbox

Nos ayuda a distribuir los elementos y alinearlos, es unidireccional, eso quiere decir que solo va en un a dirección, va vertical o va en horizontal.

Las propiedades que tiene un contenedor padre en flexbox son:

• display
• flex-direction
• flex-wrap
• flex-flow
• justify-content
• align-items
• align-content

Las propiedades de elementos hijos son:

• order
• floex-grow
• flex-shrink
• flex-basis
• flex
• align-self

Grid

Nos permite alinear elementos en filas y columnas, es bidemensional, podemos alinear elementos en dos direcciones.

Las propiedades de contenedores padre son:

• display
• grid-template
• gap
• justify-items
• align-items
• justify-content
• align-content

Propiedades de elementos hijo

• grid-column
• grid-row
• grid-area
• justify-self
• align-self

Les comparto tres guías ( completas):

• https://css-tricks.com/snippets/css/complete-guide-grid/
• https://learncssgrid.com/
• https://drive.google.com/file/d/1WqIw3tPS6gNhEnma7iHl-PEfByKSIYGK/view
  En lo personal, para trabajar con los dos juntos ( Grid y, Flex), los pienso como mi cuarto. Mi cuarto es grid ( contenedor), y flexbox, son todos mis muebles que acomodaré dentro del grid (cuarto). Sé que, no es un “término” muy “sabio” pero, si lo aterrizas a una forma “coloquial”, será más fácil de comprender, y explicar.

Con este juego: https://flexboxfroggy.com/ se puede practicar el uso de propiedades Flexbox.

📊 Diferencias entre Flexbox y CSS Grid

• Flexbox
  • Es un método que puede ayudar a distribuir el espacio entre los ítems de una interfaz y mejorar las capacidades de alineación
  • Es unidimensional ⇒ Una sola dirección
• CSS Grid
  • Es un sistema de diseño que permite al autor alinear elementos en columnas y filas
  • Es bidimensional

RESUMEN: La principal diferencia entre flexbox y Grid es la capacidad de dimensiones que cuenta cada uno flexbox es unidimensional y CSS Grid es bidimensional

Flexbox es unidireccional, es decir, solo nos permite distribuir en una direccion. Vertical u Horizontal.

Entonces para un menú de navegación es mejor usar flexbox (?)

Se que muchas veces se comparten estas paginas, pero por si a alguien le sirve para practicar.

• Simulador de Flexbox: https://juliansci.github.io/css-flexbox-simulator/

• Juego - Flexbox Froggy: https://flexboxfroggy.com/#es

• Juego - Grid Garden: https://cssgridgarden.com/#es

Resumen:
Flexbox ayuda a alinear elementos de forma unidireccional y CSS lo hace de manera Bidireccional.

.

ósea que es más factible utilizar css grid

Diferencias entre Flexbos y CSS Grid

¿Qué es Flexbox?

Es un método que puede ayudar a distribuir el espacio entre los ítems de una interfaz y mejorar las capacidades de alineación. Es un sistema unidimensional que nos permite alinear los elementos en una dirección, ya sea de forma horizontal o vertical.
Algunas de las propiedades que se pueden usar en Flexbox para el contenedor y los elementos son:

Contenedor

• display
• flex-direction
• flex-wrap
• flex-flow
• justify-content
• align-items
• align-content

Elementos

• order
• flex-grow
• flex-shrink
• flex-basis
• flex
• align-self

¿Qué es CSS Grid?

Es un sistema de diseño que permite alinear elementos en columnas y filas. Es un sistema bidimensional.
Algunas de las propiedades que se pueden usar en CSS Grid para el contenedor y los elementos son:

Contenedor

• display
• grid-template
• gap
• justify-items
• align-items
• justify-content
• align-content

Elementos

• grid-column
• grid-row
• grid-area
• justify-self
• align-self

Considero que son complementos (Css Grid y Flexbox) para que podamos crear un mejor trabajo, ya que con css grid, creamos contenedores y podemos personalizar a voluntad y con flexbox acomodamos el contenido de esos contenedores de esa forma podemos crear contenedores y contenido de la mejor manera que el proyecto lo requiera.

Flexbox es unidimensional - unidireccional. Vertical u horizontal.

CSS es bidimensional - bidireccional.

Propiedades de Flexbox

me encanta lo podersoso quepuede llegar a ser el uso de **Flex **y Grid, ,en realidad se pueden hacer cosas muy geniales con “raw css” y sin necesidad de utilizar css frameworks! ✌

La diferencia básica entre CSS Grid Layout y CSS Flexbox Layout es que flexbox fue diseñado para el diseño en una dimensión, ya sea una fila o una columna. La cuadrícula se diseñó para un diseño bidimensional: filas y columnas al mismo tiempo. Sin embargo, las dos especificaciones comparten algunas características comunes, y si ya ha aprendido a usar flexbox, las similitudes deberían ayudarlo a familiarizarse con Grid.

Propiedades de CSS Grid

**flexbox **
nos permite cambiar el orden de los elementos o y su dirección con
↓
flex-direction
nos permite añadir orden con
↓
order
también nos permite alinear elementos de forma aislada con
↓
align-self
nos permite hacer wrap con los elementos con
↓
flex-wrap
nos permite una mayor facilidad en el código sintetizando las propiedades de flex-wrap y flex-direction con
↓
flex-flow
ajusta las líneas dentro de un contenedor flex cuando hay espacio extra en el eje transversal con
↓
align-content

les comparto un un juego para aprender grid. https://codepip.com/games/grid-garden/