🎨

CSS : Flexbox et Grid

58 cards · 🇺🇸 English → 🇫🇷 Français

Mise en page avec CSS Flexbox et 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 module de mise en page CSS permettant de créer des mises en page unidimensionnelles (ligne ou colonne). Il permet un dimensionnement et un alignement flexibles des éléments le long d'un axe principal.
  2. 2Create a flex container
    Appliquer display: flex ou display: inline-flex à un élément. Ses enfants directs deviennent automatiquement des éléments flexibles (flex items).
  3. 3Main axis in Flexbox
    L'axe principal le long duquel les éléments flexibles sont disposés. La direction est définie par flex-direction (row = horizontal, column = vertical).
  4. 4Cross axis in Flexbox
    L'axe perpendiculaire à l'axe principal. Si l'axe principal est horizontal (row), l'axe transversal est vertical, et inversement.
  5. 5Values for flex-direction
    row (par défaut, de gauche à droite), row-reverse, column (de haut en bas), column-reverse. Définit la direction de l'axe principal.
  6. 6Justify-content
    Aligne les éléments flexibles le long de l'axe principal. Valeurs : flex-start, flex-end, center, space-between, space-around, space-evenly.
  7. 7Align-items
    Aligne les éléments flexibles le long de l'axe transversal. Valeurs : stretch (par défaut), flex-start, flex-end, center, baseline.
  8. 8Align-self
    Redéfinit align-items pour un élément flexible individuel. Permet à un élément d'avoir un alignement transversal différent de ses voisins.
  9. 9Flex-wrap
    Contrôle si les éléments flexibles passent sur plusieurs lignes. Valeurs : nowrap (par défaut, une seule ligne), wrap, wrap-reverse.
  10. 10Align-content
    Aligne plusieurs lignes d'éléments flexibles le long de l'axe transversal quand il y a de l'espace supplémentaire. Fonctionne uniquement avec flex-wrap: wrap.
  11. 11Flex property shorthand
    flex: [flex-grow] [flex-shrink] [flex-basis]. Exemple : flex: 1 0 auto signifie grandit, ne rétrécit pas, base auto.
  12. 12Flex-grow
    Définit la capacité d'un élément flexible à grandir si nécessaire. Par défaut 0. La valeur est une proportion (flex-grow: 2 grandit deux fois plus que 1).
  13. 13Flex-shrink
    Définit la capacité d'un élément flexible à rétrécir si nécessaire. Par défaut 1. La valeur 0 empêche le rétrécissement.
  14. 14Flex-basis
    Définit la taille par défaut d'un élément avant que l'espace restant ne soit distribué. Par défaut auto. Peut être une longueur (px, %, em) ou un mot-clé.
  15. 15Flex: 1
    Raccourci pour flex: 1 1 0, signifiant que l'élément peut grandir et rétrécir, avec une base de 0. Les éléments partagent l'espace à parts égales.
  16. 16Center an item with Flexbox
    Sur le conteneur : display: flex; justify-content: center; align-items: center. Centre selon les deux axes.
  17. 17CSS Grid
    Un système de mise en page bidimensionnel pour créer des mises en page complexes avec lignes et colonnes. Plus puissant que Flexbox pour les mises en page au niveau de la page entière.
  18. 18Create a grid container
    Appliquer display: grid ou display: inline-grid. Les enfants directs deviennent des éléments de grille.
  19. 19Grid-template-columns
    Définit les colonnes de la grille. Exemple : grid-template-columns: 200px 1fr 2fr crée 3 colonnes avec les largeurs spécifiées.
  20. 20Grid-template-rows
    Définit les lignes de la grille. Exemple : grid-template-rows: 100px auto 50px crée 3 lignes avec les hauteurs spécifiées.
  21. 21Fr unit in CSS Grid
    Unité fractionnaire représentant une fraction de l'espace disponible. 1fr 2fr signifie que la deuxième colonne reçoit deux fois plus d'espace que la première.
  22. 22Repeat()
    Répète un motif. repeat(3, 1fr) crée 3 colonnes égales. repeat(auto-fit, minmax(200px, 1fr)) crée des colonnes réactives (responsive).
  23. 23Grid-gap (gap)
    Crée un espacement entre les éléments de la grille. gap: 20px (tous), ou row-gap et column-gap séparément. La syntaxe moderne est simplement gap.
  24. 24Grid-column
    Raccourci pour grid-column-start / grid-column-end. Positionne l'élément sur les colonnes. grid-column: 1 / 3 couvre les colonnes 1-2.
  25. 25Grid-row
    Raccourci pour grid-row-start / grid-row-end. Positionne l'élément sur les lignes. grid-row: 2 / 4 couvre les lignes 2-3.
  26. 26Span multiple columns/rows
    grid-column: span 2 couvre 2 colonnes, grid-row: span 3 couvre 3 lignes. Ou utiliser les numéros de ligne : grid-column: 1 / 4.
  27. 27Grid-area
    Raccourci pour grid-row-start / grid-column-start / grid-row-end / grid-column-end, ou une zone nommée.
  28. 28Grid-template-areas
    Définit des zones de grille nommées à l'aide d'une syntaxe visuelle en art ASCII. Les éléments sont placés avec grid-area: <nom>.
  29. 29Give an example of grid-template-areas syntax.
    grid-template-areas: 'header header' 'sidebar main' 'footer footer'; Crée 3 lignes, 2 colonnes avec des régions nommées.
  30. 30Grid-auto-flow
    Contrôle comment les éléments placés automatiquement sont insérés. Valeurs : row (par défaut), column, dense (comble les trous).

And 28 more cards. Study the whole deck free

Articles about this deck

More Programming decks

See all
Study all 58 cards free