🎨

CSS: Flexbox y Grid

58 cards · 🇺🇸 English → 🇪🇸 Español

Maquetación con CSS Flexbox y Grid.

Study all 58 cards for free

Flashcards, quizzes, pixel-art games and a daily review that remembers for you.

Study this deck free

Try the first 10 cards

1 / 10
Question

Flexbox

Knew itLearning

Tap the card for the answer · swipe right if you knew it, left if not

Already have an account? Sign in

Cards

  1. 1Flexbox
    Un módulo de diseño CSS para crear layouts unidimensionales (fila o columna). Permite dimensionar y alinear elementos de forma flexible a lo largo de un eje principal.
  2. 2Create a flex container
    Aplica display: flex o display: inline-flex a un elemento. Sus hijos directos se convierten automáticamente en elementos flexibles (flex items).
  3. 3Main axis in Flexbox
    El eje principal a lo largo del cual se disponen los elementos flexibles. La dirección la define flex-direction (row = horizontal, column = vertical).
  4. 4Cross axis in Flexbox
    El eje perpendicular al eje principal. Si el eje principal es horizontal (row), el eje transversal es vertical, y viceversa.
  5. 5Values for flex-direction
    row (por defecto, de izquierda a derecha), row-reverse, column (de arriba a abajo), column-reverse. Define la dirección del eje principal.
  6. 6Justify-content
    Alinea los elementos flexibles a lo largo del eje principal. Valores: flex-start, flex-end, center, space-between, space-around, space-evenly.
  7. 7Align-items
    Alinea los elementos flexibles a lo largo del eje transversal. Valores: stretch (por defecto), flex-start, flex-end, center, baseline.
  8. 8Align-self
    Sobrescribe align-items para elementos flexibles individuales. Permite que un elemento tenga una alineación transversal distinta a la de sus hermanos.
  9. 9Flex-wrap
    Controla si los elementos flexibles se envuelven en varias líneas. Valores: nowrap (por defecto, una sola línea), wrap, wrap-reverse.
  10. 10Align-content
    Alinea varias líneas de elementos flexibles a lo largo del eje transversal cuando hay espacio extra. Solo funciona con flex-wrap: wrap.
  11. 11Flex property shorthand
    flex: [flex-grow] [flex-shrink] [flex-basis]. Ejemplo: flex: 1 0 auto significa que crece, no se encoge, con base automática.
  12. 12Flex-grow
    Define la capacidad de un elemento flexible para crecer si es necesario. Por defecto 0. El valor es una proporción (flex-grow: 2 crece el doble que 1).
  13. 13Flex-shrink
    Define la capacidad de un elemento flexible para encogerse si es necesario. Por defecto 1. El valor 0 impide que se encoja.
  14. 14Flex-basis
    Define el tamaño por defecto de un elemento antes de que se distribuya el espacio restante. Por defecto auto. Puede ser una longitud (px, %, em) o una palabra clave.
  15. 15Flex: 1
    Abreviatura de flex: 1 1 0, es decir, el elemento puede crecer y encogerse, con una base de 0. Los elementos compartirán el espacio de forma equitativa.
  16. 16Center an item with Flexbox
    En el contenedor: display: flex; justify-content: center; align-items: center. Centra en ambos ejes.
  17. 17CSS Grid
    Un sistema de diseño bidimensional para crear layouts complejos con filas y columnas. Más potente que Flexbox para diseños a nivel de página completa.
  18. 18Create a grid container
    Aplica display: grid o display: inline-grid. Los hijos directos se convierten en elementos de la cuadrícula (grid items).
  19. 19Grid-template-columns
    Define las columnas de la cuadrícula. Ejemplo: grid-template-columns: 200px 1fr 2fr crea 3 columnas con los anchos especificados.
  20. 20Grid-template-rows
    Define las filas de la cuadrícula. Ejemplo: grid-template-rows: 100px auto 50px crea 3 filas con las alturas especificadas.
  21. 21Fr unit in CSS Grid
    Unidad fraccional que representa una fracción del espacio disponible. 1fr 2fr significa que la segunda columna recibe el doble de espacio que la primera.
  22. 22Repeat()
    Repite un patrón. repeat(3, 1fr) crea 3 columnas iguales. repeat(auto-fit, minmax(200px, 1fr)) crea columnas responsivas.
  23. 23Grid-gap (gap)
    Crea espaciado entre los elementos de la cuadrícula. gap: 20px (en ambas direcciones), o row-gap y column-gap por separado. La sintaxis moderna es simplemente gap.
  24. 24Grid-column
    Abreviatura de grid-column-start / grid-column-end. Posiciona el elemento a través de las columnas. grid-column: 1 / 3 abarca las columnas 1-2.
  25. 25Grid-row
    Abreviatura de grid-row-start / grid-row-end. Posiciona el elemento a través de las filas. grid-row: 2 / 4 abarca las filas 2-3.
  26. 26Span multiple columns/rows
    grid-column: span 2 abarca 2 columnas, grid-row: span 3 abarca 3 filas. O usa números de línea: grid-column: 1 / 4.
  27. 27Grid-area
    Abreviatura de grid-row-start / grid-column-start / grid-row-end / grid-column-end, o un área con nombre.
  28. 28Grid-template-areas
    Define áreas de la cuadrícula con nombre usando una sintaxis visual tipo arte ASCII. Los elementos se colocan usando grid-area: <nombre>.
  29. 29Give an example of grid-template-areas syntax.
    grid-template-areas: 'header header' 'sidebar main' 'footer footer'; Crea 3 filas y 2 columnas con regiones con nombre.
  30. 30Grid-auto-flow
    Controla cómo se insertan los elementos colocados automáticamente. Valores: row (por defecto), column, dense (rellena huecos).

And 28 more cards. Study the whole deck free

Articles about this deck

More Programming decks

See all
Study all 58 cards free