EnglishCommencer

Flexbox

Le conteneur flex et ses enfants : axe principal et axe secondaire, justify-content, align-items, gap, et le partage de l'espace libre avec flex-grow, flex-shrink et flex-basis.

  • 25 cartes
  • 5 thèmes
  • Gratuit
Réviser ce deck

Le programme, thème par thème

Le poids de chaque thème suit celui que lui donne l'examen.

  1. Notions
  2. Questions
  3. Ranger et relier
  4. Les chiffres
  5. Mises en situation

Quelques cartes du deck

  • Axe principal : de quoi s'agit-il ?

    Voir la réponse

    Direction dans laquelle un conteneur flex aligne ses enfants : horizontale pour row, verticale pour column ; justify-content y répartit l'espace.

    Il change avec flex-direction : en column, justify-content agit sur la verticale. C'est la source de la plupart des confusions entre justify-content et align-items.

  • Où se trouve l'élément dans ce conteneur de 400 px de haut ?

    ```css
    .conteneur {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-end;
    height: 400px;
    }
    `

    • Centré en hauteur, collé au bord droit
    • Centré en largeur, collé au bord bas
    • Collé en haut, collé au bord droit
    • Centré en hauteur et centré en largeur
    Voir la réponse

    Centré en hauteur, collé au bord droit

    En colonne, l'axe principal est vertical : justify-content: center centre en hauteur. L'axe secondaire est horizontal : align-items: flex-end pousse l'élément à droite.

  • display: flex sur un parent le transforme en conteneur flex : ses enfants directs deviennent des …, disposés le long de l'axe principal.

    Voir la réponse

    display: flex sur un parent le transforme en conteneur flex : ses enfants directs deviennent des éléments flex, disposés le long de l'axe principal.

    Seuls les enfants directs sont concernés ; les petits-fils gardent leur mise en page habituelle.

  • Axe secondaire : de quoi s'agit-il ?

    Voir la réponse

    Direction perpendiculaire à celle où les enfants s'alignent ; align-items y place les éléments.

    Par défaut (row), c'est la verticale : align-items: center centre alors les éléments en hauteur, à condition que le conteneur ait de la hauteur à partager.

Réviser ce deck