Manipuler l'ordre et la taille des éléments Flexbox
Objectifs
Les objectifs de cette vidéo sont de :
- Comprendre et utiliser la propriété
flex-basis - Apprendre à positionner les éléments Flexbox avec
order - Optimiser la mise en page web pour une meilleure adaptabilité
Résumé
Apprenez à utiliser les propriétés CSS3 pour manipuler les Flexbox, y compris l'ajustement de la taille par défaut et le changement de l'ordre des éléments.
Description
Cette leçon approfondit les propriétés CSS3 relatives à la gestion des Flexbox. Vous allez découvrir comment définir une taille par défaut pour chaque boîte avant la redistribution de l'espace restant, grâce à la propriété flex-basis. Vous apprendrez également à manipuler l'ordre des éléments individuellement au lieu de les suivre dans l'ordre défini par flex-direction. En comprenant la propriété order, vous serez capable de personnaliser l'affichage de vos contenus pour obtenir un rendu optimal sur différents dispositifs.
Nous explorerons également comment l'ordre order des boîtes affecte leur empilement dans le conteneur, et comment sa valeur numérique n'a pas d'importance relative mais interagit avec les valeurs des autres boîtes.
Questions - réponses
flex-basis permet de définir une taille par défaut pour un élément Flexbox avant que l'espace restant ne soit redistribué.
order, qui permet de définir un ordre spécifique pour chaque élément indépendamment des autres.
order, ils apparaîtront dans l'ordre dans lequel ils sont définis dans le conteneur.
Programme détaillé
Module 1 - Flex
Module 2 - Exercices pratiques
Facebook
Twitter
Linkedin
Email
flex: 1 1 0px;
Et lorsque je supprime cette ligne de code et bien le texte de l'article réapparaît, mais le header ne reste pas figer lorsque je scrolle.
Je ne comprends pas trop d'où pourrais venir le problème. Je tacherais de recommencer pour trouver la solution.
Explications claires