Hier, nous avons discuté de l’avenir de la mise en page CSS et de quelques-uns des nouveaux modules apportés par CSS3 dans ce domaine. L'un de ceux-ci que nous avons brièvement évoqué était CSS3 Flexbox.
Aujourd'hui, nous allons approfondir ce modèle et créer une page Web complète avec ce dernier. Il ne sera en aucun cas prêt à être mis en œuvre dans vos projets, mais il vous donnera une idée plus précise de la possibilité de coder des sites Web dans les années à venir. De plus, ce jeu est tout simplement amusant et amusant à jouer!
Très expérimental: Webkit uniquement
Mon objectif pour cet article était de faire fonctionner une page sous plusieurs navigateurs, cela ne s'est pas produit. À ce stade, la mise en œuvre est boguée et incohérente d’un navigateur à l’autre, même après l’installation de Flexie.js, Firefox et Safari obtenaient des résultats très différents (je pense que cela concerne le mélange de conteneurs typiques centrés sur les marges et de Flexbox).
Pour cette raison, le projet d'aujourd'hui visera principalement Safari et Chrome car franchement, c'est encore le bordel dans les autres navigateurs! Je vous encourage définitivement à suivre et à utiliser le produit fini pour voir si vous pouvez le mettre en œuvre dans une implémentation multi-navigateurs. Si vous avez des suggestions, j'aimerais les entendre dans les commentaires!
Étape 1: Classes réutilisables
Comme j'ai brièvement expliqué le concept de base de Flexbox dans le post d'hier, je me concentrerai sur la mise en œuvre ici. Mais ne vous inquiétez pas, vous devriez comprendre l'essentiel au fur et à mesure.
La première chose à faire est de créer des classes de base qui aideront à définir notre mise en page. Ces attributs peuvent être appliqués à un identifiant selon les besoins, mais je trouve cela utile et ordonné de le faire de cette façon.
Discutons comment ces classes fonctionnent. La première classe, hasflex, sera appliqué à un conteneur parent dont nous souhaitons disposer les enfants à l’aide de ce nouveau système Flexbox. Vous remarquerez une chose: toute cette conception sera complètement dépourvue de flotteurs, ce qui vous donne de bonnes indications quant à l'emplacement où nous allons implémenter Flexbox dans notre code.
Ensuite, nous avons mis en place quelques classes supplémentaires pour appliquer diverses méthodes. box-flex valeurs. Flexbox répartira facilement nos éléments enfants dans le conteneur et ceux-ci définiront les proportions. je croyez que la valeur par défaut est? 0? mais les résultats semblaient un peu déréglés par cette hypothèse, j'ai donc trouvé utile de toujours appliquer une valeur manuellement.
Étape 2: Initial HTML et CSS
Pour commencer votre document HTML, créez un conteneur et un en-tête. À ce stade, ce sont des éléments de base que nous allons construire comme toujours sans l'aide de Flexbox.
Une fois que vous avez cela en place, jetez les styles de base ci-dessous. Fondamentalement, j'ai mis en place un corps sombre avec un conteneur léger de 1 000 px qui contiendra tout notre contenu. Ajoutez quelques marges au centre et quelques styles de texte de base et nous sommes prêts à passer à la partie amusante.
Remarque: La police de titre que je vais utiliser est Oswald, de Google Fonts.
Étape 3: navigation
Maintenant, pour la zone de navigation, vous créez généralement une liste de liens, puis vous les faites flotter à gauche. Avec Flexbox, le processus est un peu différent. Ici, nous appliquons simplement le hasflex classe que nous avons créée plus tôt et utilisons box0 pour chacun des éléments de la liste. Appliquer box0 to all three a pour effet de faire flotter les liens vers la gauche mais de ne pas les distribuer sur toute la largeur du conteneur.
Après cela, nous appliquons simplement les mêmes types de styles que ceux appliqués à n’importe quelle autre page Web. L'objectif principal ici est d'espacer un peu les liens avec quelques marges et de nous assurer que nos liens sont correctement stylés.
Étape 4: l'image
Toute bonne page Web a besoin d'une image. Pour illustrer davantage la manière dont vous appliquez sélectivement Flexbox uniquement aux éléments qui en ont besoin, nous intégrons une grande image d'en-tête utilisant le même code exact que vous le feriez normalement.
Combinez cela avec des CSS de base et vous obtenez une mise en page rapide et facile en trois colonnes! Etant donné que Flexbox prend automatiquement en charge la distribution par rapport à la largeur du parent, toute modification apportée au parent sera automatiquement répercutée sur les enfants.
Une chose fascinante à propos de Flexbox est que nous pourrions réorganiser les colonnes que nous avons configurées en utilisant du CSS pur. Attribution -webkit-box-ordinal-group: (un nombre); à chaque élément vous donne le contrôle sur l'ordre de leur apparence.
Étape 6: pile verticale
Il est important d'apprendre que vous ne devez pas utiliser de colonnes verticales lorsque vous utilisez Flexbox. Nous pouvons utiliser la même technique que ci-dessus pour empiler quelques paragraphes les uns sur les autres. Si vous vous intéressez vraiment à Flexbox, cette technique peut être utilisée pour mélanger des éléments empilés verticalement et horizontalement, mais nous allons la garder ici pour voir comment elle fonctionne.
La principale différence ici est que nous avons défini boîte-orient to vertical, ce qui nous donne la pile verticale montrée dans l'image ci-dessus au lieu des colonnes que nous avons créées à l'étape précédente.
Étape 7: deux colonnes
Juste pour changer les choses une dernière fois, créons une autre section, cette fois avec deux colonnes au lieu de trois. Le principe est exactement le même. Vous n'avez pas à repenser la présentation, car vous avez cette fois deux colonnes, Flexbox s'occupe encore une fois de tout le travail lourd.
Produit fini
Découvrez une démo en direct si vous êtes dans Safari ou Chrome.
Aller plus loin
J'ai intentionnellement essayé de garder cet exemple aussi simple que possible. Cependant, vous pouvez facilement prendre cette disposition et la rendre encore plus complexe. Pour commencer, utiliser des pourcentages de largeur vous donnera une belle mise en page vraiment flexible. En outre, comme je l’ai mentionné ci-dessus, vous pouvez effectuer des actions complexes telles que la réorganisation des colonnes et le mélange de piles verticales et horizontales dans la même rangée. Je vous encourage à jouer avec le code autant que possible en utilisant cette page comme guide.
Conclusion
Cet exemple de base vise à mieux comprendre comment nous pourrions utiliser Flexbox pour créer des présentations simples et complexes à l'avenir. Je suis assez nouveau dans le module, donc c'est loin de parfait, comme en témoigne le fait qu'il n'est pas encore compatible avec tous les navigateurs!
En dépit de ses inconvénients, vous devez bien comprendre le fonctionnement du module et ce qu’il est possible de faire avec une quantité de code relativement petite pour tirer parti de Flexbox. N'hésitez pas à ajouter de nombreuses suggestions dans les commentaires!