Descubre qué ha cambiado en nuestro medio

1

Todo sobre el diseño de páginas web acaba de cambiar

Conceptos que forman parte del diseño en CSS

2

La importancia de recordar las herramientas existentes

3

Flujo normal del documento: display block, inline e inline-block

4

Contextos de formato: Formato de Contexto de Bloque (BFC)

5

Posicionamiento + Dinámica: ¿Cómo se vería?

¿Flexbox o CSS Grid?

6

Diferencias entre Flexbox y CSS Grid

7

Similitudes entre Flexbox y CSS Grid

8

¿Puedo trabajar con Flexbox y CSS Grid al tiempo?

9

Dinámica: ¿Qué usarías? (Parte 1)

10

Dinámica: ¿Qué usarías? (Parte 2) + Reto

11

¿Cuándo usar Flexbox y cuándo usar CSS Grid?

Modern Layouts con CSS Grid

12

¿Qué son los Modern CSS Layouts?

13

Patrones para usar como punto de partida

14

Layouts: Super Centered, The Deconstructed Pancake, Sidebar Says, Pancake Stack, Classic Holy Grail Layout

15

Layouts: 12-Span Grid, RAM (Repeat, Auto, MinMax), Line Up, Clamping My Style, Respect for Aspect

Diseño web para desarrolladores

16

Dinámica: No puedo dejar de ver

17

Design System y detalles visuales a tener en cuenta

18

Tendencias de diseño UI/UX: Fase de inspiración y creatividad

19

Wireframes y comunicación visual simple, intuitiva y atractiva

20

Figma para devs: Auto Layout y Neumorphism (Parte 1)

21

Figma para devs: Auto Layout y Neumorphism (Parte 2)

Del diseño al código

22

Primeros pasos y estructura inicial

23

Ubicación y creación de elementos

El futuro de CSS Grid

24

Entendiendo las versiones de CSS: ¿existirá CSS4?

25

CSS Subgrid

26

Native CSS Masonry Layout

27

CSS feature queries: @supports

28

Nosotros y el futuro de la web: tips para seguir aprendiendo y mantenerse al día

Aún no tienes acceso a esta clase

Crea una cuenta y continúa viendo este curso

Diferencias entre Flexbox y CSS Grid

6/28
Recursos

Aportes 24

Preguntas 1

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad? Crea una cuenta o inicia sesión.

PROPIEDADES



Su felicidad al iniciar la clase contagia xD

<h3>Diferencias entre flexbox y CSS grid</h3>

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

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

📊 Diferencias entre Flexbox y CSS Grid

<h4>Apuntes</h4>
  • 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.

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/