La liste de lecture Flexbox : techniques et outils

Flexbox nous donne un nouveau type de contrôle sur nos mises en page, rendant les défis de codage difficiles ou impossibles à résoudre avec CSS seul, simples et intuitifs. Il nous donne les moyens de construire des grilles flexibles et conscientes du contenu dynamique, et ainsi, nous donne la liberté de nous concentrer sur le processus de création au lieu de nous frayer un chemin vers une mise en page.

Pour vous donner une longueur d'avance sur Flexbox et vous donner des idées sur la façon de l'utiliser pour maîtriser les défis de codage courants, nous avons rassemblé des conseils, des astuces et des outils qui vous aident à tirer le meilleur parti de sa puissance dès aujourd'hui. La liste n'est en aucun cas complète, mais comprend les ressources que nous avons trouvées utiles et utiles.

Lectures complémentaires sur SmashingMag :

• Concevoir des mises en page avec Flexbox
• Centrage horizontal et vertical avec CSS et Flexbox
• Requêtes de quantité avec CSS et Flexbox
• Modules d'interface utilisateur (listes déroulantes, pieds de page collants, etc.)
• Modules Flexbox pour applications Web

Commencer

Utiliser Flexbox aujourd'hui

L'article de Chris Wright "Utiliser Flexbox aujourd'hui" est une excellente introduction à la puissance de Flexbox et à son utilisation. Comme le souligne Chris, il existe un écart net entre ce que nous construisons aujourd'hui et la façon dont nous aborderons demain. Donc, pour inciter davantage de personnes à utiliser Flexbox aujourd'hui, il décrit une stratégie pour ajouter de la valeur à vos projets et fournit des exemples sur la façon d'améliorer les mises en page actuelles avec Flexbox, parmi lesquelles les mises en page de cartes, les mises en page d'écran partagé, les mises en page épinglées, les journaux et les blocs d'annonces, des mises en page multi-colonnes ainsi que des tableaux de bord.

Apprenez Flexbox de manière amusante

Honnêtement, malgré (ou à cause de ?) son grand potentiel, Flexbox peut être assez intimidant si vous êtes sur le point de vous lancer. Une façon amusante de saisir ses propriétés et ses éléments est Flexbox Froggy, un jeu par navigateur qui vous apprend les bases de Flexbox en l'utilisant pour guider une petite grenouille vers son nénuphar.

Trucs et astuces pratiques

Vous avez compris les bases de Flexbox et êtes prêt à plonger plus profondément ? Les ressources suivantes fournissent des solutions pratiques aux défis de codage courants.

Résolu par Flexbox

Pensez à toutes ces choses que les pirates CSS ont essayé de résoudre pendant des années : la mise en page du Saint Graal, les paires d'entrées fluides pleine largeur, les objets multimédias qui s'en sortent sans aucun débordement, les hacks de correction ou de mise en forme des blocs, les pieds de page qui collent même au bas de pages à contenu clairsemé, centrage vertical - eh bien, Flexbox résout tout cela, pour de bon et sans aucun piratage. Philipp Walton a compilé une vitrine de ces défis et de leurs solutions Flexbox. Idéal pour garder à portée de main pour votre prochain projet.

Création de grilles affinées

Au cœur de Flexbox se trouve sa capacité à produire des grilles encapsulables qui tolèrent le contenu dynamique. Vous pouvez utiliser des techniques d'emballage de base pour répartir automatiquement les enfants dans une grille, et ainsi, assurer une disposition décente, quel que soit le nombre d'enfants. Les requêtes d'éléments aident à rendre vos grilles entièrement réactives avec des enfants qui s'étendent pour atteindre une largeur minimale, et la possibilité de remanier les éléments dans la grille garantit qu'une grille ne se termine jamais avec une seule ligne d'éléments.

Flexbox et requêtes de quantité

Aaron Gustafson a expérimenté Flexbox et les requêtes de quantité pour proposer une disposition de grille flexible avec des améliorations visuelles. Dans le cas d'Aaron, la disposition de la grille s'adapte pour mettre en évidence une à deux de ses prochaines apparitions et permet aux autres d'entrer à la taille de grille par défaut. Aussi une bonne idée pour une page de portfolio ou des articles de blog récents, par exemple.

Emballage de décalage d'alignement

Imaginez le problème suivant : vous avez un titre principal et un sous-titre sur la même ligne. Vous voulez que le titre principal soit aligné à gauche, le sous-titre aligné à droite et que le sous-titre soit placé sous le titre principal lorsqu'il n'y a pas assez d'espace.

C'est la situation dans laquelle Chris Coyier s'est retrouvé. Sa technique d'habillage par décalage d'alignement résout le problème en donnant au titre un flex-container avec display:flex; et le titre lui-même flex-grow: 1; , de sorte que le sous-titre est poussé vers la droite. Et puisque les flex-containers peuvent s'envelopper, il suffit d'un flex-wrap: wrap; pour que le sous-titre se comporte comme prévu sur les petits écrans. Un de ces moments où Flexbox excelle à rendre quelque chose de dur incroyablement simple. Également applicable à d'autres défis de conception réactive.

Remplacer justify-content

L'un des secrets les mieux gardés de Flexbox est probablement de savoir comment remplacer justify-content pour positionner un élément flexible indépendamment le long de l'axe principal. La solution : les marges automatiques ! Ils ne sont pas nouveaux pour CSS, bien sûr, mais en combinaison avec Flexbox, ils dévoilent une toute nouvelle puissance. Lorsqu'il est appliqué à un élément flexible, l'élément étendra automatiquement sa marge spécifiée pour occuper l'espace supplémentaire dans le conteneur flexible en fonction de la direction dans laquelle la marge automatique est appliquée.

Réinventer les modèles d'interface utilisateur avec Flexbox

Que la puissance de Flexbox va au-delà des tâches de mise en page courantes, montre une expérience de Zell Liew. Il a utilisé Flexbox pour réinventer un modèle d'interface utilisateur que vous trouverez partout : l'élément de classement par étoiles. Sa version Flexbox se débrouille avec seulement 50 lignes de code et cinq étoiles en SVG et a été réalisée en utilisant une combinaison du sélecteur frère ~ , de la propriété flex-flow et row-reverse . Génial !

Flexbox Patterns de CJ Cenizal montre également comment utiliser la puissance de Flexbox pour créer des composants d'interface utilisateur. Il fournit des exemples interactifs et le code source dont vous aurez besoin pour démarrer avec des entrées pas à pas, des onglets, des pieds de page de formulaire, des invites centrées, des barres latérales et plus encore.

Outils et autres ressources

Calcul de la largeur des éléments flexibles

Si le calcul de la largeur des éléments flexibles vous donne des maux de tête, alors Flexbox Tester est fait pour vous. Entrez simplement des valeurs pour flex-grow , flex-shrink et flex-basis pour trois éléments flexibles pour voir comment ils se comportent.

Traiter les bogues et les solutions de contournement

Comme toute technique, Flexbox n'est pas exempt de bogues, bien sûr. Pour les moments où vous en rencontrez un, Flexbugs est tenu de répondre à un correctif. La liste des problèmes Flexbox organisée par la communauté est régulièrement mise à jour pour fournir des solutions et des solutions de contournement du navigateur. Si vous découvrez un bogue qui n'est pas encore répertorié, vous pouvez le signaler via GitHub. En parlant de solutions de contournement du navigateur : le polyfill de flexibilité fournit un correctif pour les anciennes versions d'Internet Explorer qui ne prennent pas en charge Flexbox. Il détecte les éléments affectés par flex sur la page et les restyle en conséquence dans IE 8 et 9.

Vous avez quelque chose à ajouter à la liste ? Faites-nous part de vos ressources Flexbox préférées dans la section commentaires ci-dessous.