Exemples d'intégration en Flexbox
Techniques
- 01. Aligner horizontalement display:inline-block
- 02. Aligner horizontalement comparaison display: flex
- 03. Répartir les espaces vides parents justify-content: flex-end, flex-start, flex-center
- 04. Répartir les espaces vides enfants 1/2 justify-content : space-between;
- 05. Répartir les espaces vides enfants 2/2 justify-content :justify-content: space-around
- 06. Couper une liste d’éléments en deux 1/2 margin-left: auto;
- 07. Couper une liste d’éléments en deux 2/2 margin: auto;
- 08. Agrandir et réduire à un élément spécifique avec flex: auto;
- 09. Répartir uniformément l'espace disponible avec flex-auto;
- 10. Faire garder la taille nominale à un élément avec flex:none;
- 11. Autoriser le débordement du conteneur par flex:none appliqué aux enfants
- 12. Autoriser le retour à la ligne au parent avec flex-wrap: wrap;
- 13. Autoriser le retour à la ligne au parent avec flex-wrap: wrap-reverse;
- 14. Autoriser le retour à la ligne au parent avec justification des blocs flex-auto; aux enfants
- 15. Autoriser le retour à la ligne sur 2 colonnes
- 16. Autoriser le retour à la ligne sur 3 colonnes
- 17. Aligner les éléments verticalement avec flex:direction
Propriétés détaillées
- 18. Tableau exemple de placements
- 19. Définir un conteneur flexible
- 20. Ordonner les éléments en lignes ou en colonnes Flex:column
- 21. Placer les éléments flexibles sur plusieurs lignes ou colonnes Flex-wrap
- 22. Ordonner avec un poids donné aux éléments order
- 23. Alignement avec la propriété align-content sur l'axe secondaire
- 24. Surcharger l'alignement avec align-self sur l'axe secondaire
- 25. Rétablir l'espace disponible
- 26. La super-propriété Flex