CATALOGUE Code & Data Formation XHTML/CSS Apprendre CSS 3 Manipulation de l'ordre des items avec Flexbox

Manipulation de l'ordre des items avec Flexbox

Order
Vidéo non disponible ! Réessayez plus tard
Cette vidéo fait partie de la formation
Apprendre CSS 3
Revoir le teaser Je m'abonne
4,5
Transcription
89,00€ Je commande
Formation incluse dans l'abonnement Elephorm Je m'abonne à Elephorm
DescriptionProgrammeAvis
4,5
89,00€ Je commande
Formation incluse dans l'abonnement Elephorm Je m'abonne à Elephorm

Réorganisation dynamique des éléments en CSS

Objectifs

Apprendre à utiliser la propriété 'order' de Flexbox pour réorganiser les items.
Comprendre l'impact de cette propriété sur le responsive design.
Appliquer ces connaissances pour améliorer l'UX/UI de vos projets web.

Résumé

Apprenez à réorganiser les items dans un conteneur Flexbox sans modifier l'HTML de base, utile pour le responsive design.

Description

Dans cette leçon, nous explorons une propriété cruciale de Flexbox : l'ordre des items. Contrairement aux méthodes de bascule avec row-reverse ou column-reverse, qui inversent grossièrement l'ordre des éléments, nous allons apprendre à manipuler précisément la position de chaque item individuel.

En attribuant une valeur d'ordre spécifique à chaque élément, nous pouvons définir où il apparaît dans le flux visuel sans modifier l'ordre d'origine dans le code HTML. Cette technique est extrêmement puissante, notamment dans le contexte du responsive design où l'agencement des éléments peut varier considérablement entre les formats mobile, tablette et ordinateur de bureau.

Par exemple, vous pouvez définir que le second élément doit apparaître en première position et le quatrième élément en troisième position. Ainsi, vous pouvez jouer avec l'arrangement visuel de vos composants de manière flexible et intuitive.

Cette méthode est particulièrement avantageuse pour les sites web modernes où la UX (expérience utilisateur) et la UI (interface utilisateur) doivent s'adapter dynamiquement aux différents appareils utilisés par les visiteurs.

Voir plus

Questions - réponses

Pourquoi utiliser la propriété 'order' dans Flexbox ?
La propriété 'order' permet de réorganiser visuellement les items sans changer l'ordre dans le code HTML, ce qui est essentiel pour le responsive design.
Comment la propriété 'order' améliore-t-elle le responsive design ?
Elle permet de réarranger les éléments pour différentes résolutions d'écran, offrant une expérience utilisateur optimale sur mobile, tablette et ordinateur de bureau.
Que se passe-t-il si deux items ont la même valeur d'ordre ?
Si deux items ont la même valeur d'ordre, ils apparaîtront dans l'ordre dans lequel ils sont définis dans le code HTML.

Programme détaillé

4 commentaires
4,5
4 votes
5
4
3
2
1
pierre.hiroux
Il y a 6 months
Commentaire
La formation est divisée en 90 modules sans lien entre eux et sans progression pédagogique. Il faut les réorganiser par thème pour donner plus de cohérence et donner de la progression pédagogique à la formation. Multiples fautes d'orthographe dans les textes.
henridjithat
Il y a 1 year
Commentaire
Très bonne formation, étant débutant j'ai beaucoup appris.
yvan.vogel
Il y a 2 years
Commentaire
J'en suis arrivé au bout.. Un vrai marathon. Très longue formation, à mon avis c'est plutôt 30h de cours et non pas 15h.
Après c'est une formation hyper claire et détaillée. L'auteur a fait un panorama complêt sur le CSS3.
g.vanleynseele
Il y a 4 years
Commentaire
Cours très clair et très bien expliqué! Par contre il manque la moitié des fichiers de travail !