Bienvenue dans le Playground des conteneurs
Essayez-le pour découvrir comment utiliser les conteneurs Flexbox sur votre prochain site web.
Dans ce Playground, vous suivrez 10 leçons qui vous permettront de découvrir toutes les nouvelles possibilités offertes par cette fonctionnalité.
Votre mission : changer la direction
Vous pouvez facilement modifier la direction de vos éléments pour passer d'un empilement en colonne à une disposition en ligne, en seulement quelques clics.
- Cliquez sur le conteneur contenant les formes
- Dans l'onglet Mise en page, accédez à la section « Éléments »
- Définissez Direction sur Ligne - horizontal
Votre mission : aligner sur la fin du Flex
Lorsque Direction est définie sur Ligne - horizontal, vous pouvez modifier l'alignement des éléments dans le conteneur pour les placer en haut, au centre ou en bas du conteneur.
- Cliquez sur le Conteneur
- Dans l'onglet Mise en page, accédez à la section « Éléments »
- Définissez Aligner les éléments sur Fin
Votre mission : ajouter un espacement égal autour des éléments
Vous pouvez également ajuster facilement et uniformément la distance entre vos éléments et les bords du conteneur.
- Cliquez sur le Conteneur
- Dans l’onglet Mise en page, accédez à la section « Éléments »
- Définissez Justifier le contenu sur Espace autour
Votre mission : activer Envelopper
Lorsque les éléments sont disposés en ligne, vous pouvez activer Envelopper afin qu'ils passent à la ligne suivante et s'intègrent parfaitement dans le conteneur.
- Cliquez sur le Conteneur
- Dans l’onglet Mise en page, accédez à la section « Éléments »
- Cliquez sur « Envelopper »
À vous de jouer !
Modifiez la direction du conteneur Hero afin que tous les éléments soient disposés en ligne, avec le titre, le texte et le bouton empilés sur la gauche.
Hidden
- Cliquez sur le conteneur « Hero »
- Dans l'onglet Mise en page, accédez à la section « Éléments »
- Définissez Direction sur Ligne - horizontal
learn to play
Lorem ipsum dolor sit amet, consectet adipiscing elit,sed do eiusm por incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea sint occae cupidatat non proident, sunt in culpa .
Inversez facilement le contenu
Prenez le deuxième Conteneur et inversez sa direction.
Hidden
- Cliquez sur le Conteneur « Second Content »
- Dans l'onglet Mise en page, accédez à la section « Éléments »
- Définissez Direction sur Ligne - inversé
Keep Me in Place
Lorem ipsum dolor sit amet, consectet adipiscing elit,sed do eiusm por incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea sint occae cupidatat non proident, sunt in culpa fringilla semper nisi.
$00 - Lorem ipsum dolor sit amet
$00 - Consectet adipiscing elit sed do
$00 - Eiusm por incididunt ut labore
Group 01 - Wed - Thu 4pm - 5pm
Group 02 - Mon - Fri 5pm - 6pm
* Quis nostrud exercitation ullamco laboris nisi ut
Flip My Direction
Lorem ipsum dolor sit amet, consectet adipiscing elit,sed do eiusm por incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea sint occae cupidatat non proident, sunt in culpa fringilla semper nisi.
$45 \ Lorem ipsum dolor sit amet
$160 \ Consectet adipiscing elit sed do
Mon - Tue 6pm - 7pm
Wed - Fri 6pm - 7pm
Créez vos conteneurs imbriqués
Créons une mise en page comprenant des conteneurs imbriqués avec différentes dispositions.
Hidden
- Cliquez sur le conteneur « Gallery »
- Dans l'onglet Mise en page, accédez à la section « Éléments »
- Définissez Direction sur Ligne - horizontal
- Définissez Aligner les éléments sur Centré
left
Malesuada fames ac turpis egestas integer
eget aliquet nibh. Egestas maecenas
Center
Malesuada fames ac turpis egestas integer
eget aliquet nibh. Egestas maecenas
Center
Malesuada fames ac turpis egestas integer
eget aliquet nibh. Egestas maecenas
Right
Malesuada fames ac turpis egestas integer
eget aliquet nibh. Egestas maecenas
En route vers le succès
Essayez d'aligner le widget carré du milieu en haut du Conteneur. Astuce - Ajustez la mise en page du widget concerné.
Hidden
- Cliquez sur le widget d'image du milieu (carré)
- Dans l'onglet Avancé, définissez Alignement individuel sur Début
Lorem ipsum dolor sit amet, te has solet postea. Voluptua quaestio dissentias has ex, no eum aliquid.
Mise en page responsive sur mobile
Choisissez un ordre personnalisé pour chaque appareil sans dupliquer le contenu. Sur mobile, placez l'image en dernier, sous le bouton CTA.
Hidden
- Cliquez sur le conteneur « Oval Image »
- Dans l'onglet Avancé, dans le contrôle « Tri », passez au point de rupture Mobile
- Une fois en mode Mobile, définissez « Tri » sur Fin à l'aide de la flèche
Mobile view
Lorem ipsum dolor sit amet, te has solet postea Voluptua quaestio dissentias has ex no eum.
C'est dans la boîte
Lorsque vous disposez des éléments en ligne, ils ne tiennent pas toujours sur une seule ligne. Utilisez Envelopper pour leur permettre de passer à la ligne suivante afin qu'ils s'adaptent parfaitement à l'écran. Vous devrez également ajuster le Titre afin que sa largeur soit de 100 %.
Bonus - Vous pouvez ajouter un lien hypertexte à chacune des cartes à l'aide de la Balise HTML.
Hidden
- Cliquez sur le conteneur « Cards »
- Dans l'onglet Mise en page, accédez à la section « Éléments »
- Cliquez sur Envelopper
- Cliquez sur le widget de titre « WRAP AND LINK » et, dans l'onglet Avancé, définissez Largeur sur 100 %
- Cliquez sur le conteneur « Add Hyperlink »
- Dans l'onglet Mise en page, dans la section « Options supplémentaires », définissez Balise HTML sur « a (Lien)»
- Dans le champ « Lien » qui apparaît, vous pouvez ajouter le lien de votre choix
Wrap and link
Name Lastname
Professional Tittle
Lorem ipsum dolor sit amet, consectet adipiscing elit,sed do eiusm por incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea sint occae cupidatat non proident, sunt in culpa qui officia mollit natoque t massa quis enim.
Name Lastname
Professional Tittle
Lorem ipsum dolor sit amet, consectet adipiscing elit,sed do eiusm por incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea sint occae cupidatat non proident, sunt in culpa qui officia mollit natoque t massa quis enim.
Name Lastname
Professional Tittle
Lorem ipsum dolor sit amet, consectet adipiscing elit,sed do eiusm por incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea sint occae cupidatat non proident, sunt in culpa qui officia mollit natoque t massa quis enim.
Name Lastname
Professional Tittle
Lorem ipsum dolor sit amet, consectet adipiscing elit,sed do eiusm por incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea sint occae cupidatat non proident, sunt in culpa qui officia mollit natoque t massa quis enim.
Name Lastname
Professional Tittle
Lorem ipsum dolor sit amet, consectet adipiscing elit,sed do eiusm por incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea sint occae cupidatat non proident, sunt in culpa qui officia mollit natoque t massa quis enim.
Name Lastname
Professional Tittle
Lorem ipsum dolor sit amet, consectet adipiscing elit,sed do eiusm por incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea sint occae cupidatat non proident, sunt in culpa qui officia mollit natoque t massa quis enim.
Vous avez réussi !
Félicitations !
Maintenant que vous maîtrisez les bases des conteneurs Flexbox, vous êtes prêt à mettre vos connaissances en pratique. Commencez à expérimenter dans votre environnement de test et utilisez vos outils Flexbox pour créer un site web unique et performant.