Share
CSS, malgré son plafond de compétences relativement faible, semble toujours avoir un tueur en vedette dans sa manche. Rappelez-vous comment les requêtes des médias ont rendu les présentations réactives possibles et ont révolutionné le développement frontal. Eh bien, aujourd’hui, nous allons parler d’un nouveau mode de présentation, appelé flexbox, une nouveauté de CSS3. Je suis sûr que vous êtes impatient d'y aller! Commençons après le saut.
Changements ultérieurs dans Techniques et logicielsCertains aspects des applications ou techniques utilisées dans ce tutoriel ont changé depuis sa publication initiale. Cela pourrait le rendre un peu difficile à suivre. Nous vous recommandons de consulter ces didacticiels plus récents sur le même sujet:
Actuellement, la spécification CSS Flexbox est un brouillon et les choses vont changer! Les exemples abordés dans ce didacticiel risquent de ne pas fonctionner à l'avenir, car les navigateurs modifient leur implémentation de flexbox pour correspondre à la spécification. Le but de ce tutoriel est de vous fournir une compréhension de base de la flexbox CSS et de vous expliquer comment l'utiliser dans vos pages Web..
Veuillez noter que ce didacticiel utilisera des exemples webkit / non préfixés par le fournisseur par souci de brièveté. Consultez caniuse.com pour obtenir une liste des navigateurs prenant en charge le module flexbox et référencer les préfixes nécessaires dans vos projets, en conséquence..
CSS Flexbox est essentiellement un mode de mise en page. Il existe des modes de présentation dans CSS, et ils sont là depuis longtemps. Un exemple de mode de mise en page est bloc (par exemple, display: block). Les dispositions de bloc sont un excellent moyen de mettre en forme des documents entiers. De nombreux éléments sont traités par le navigateur comme des niveaux de bloc, par défaut. comprennent des éléments communs, tels que des paragraphes et des divs.
Parfois, lorsqu'un élément n'est pas bloqué, il est susceptible d'être en ligne. Les éléments de niveau en ligne incluent la balise d'ancrage, la balise d'entrée et la balise forte. Les outils de développement de Chrome vous permettent en fait d'afficher le "style calculé" d'un élément, ce qui est un excellent moyen de déterminer les propriétés et les valeurs CSS appliquées aux éléments non définis explicitement par le développeur..
Voici une astuce pour accéder au style calculé d'un élément à l'aide de la méthode window.getComputedStyle de JavaScript..
Accentsconagua
var elem = document.querySelector ('h1 # someId'); window.getComputedStyle (elem) .display; //bloc En dehors des modes de présentation en bloc et en ligne, CSS dispose également de modes de présentation en tableau et positionnés. La raison pour laquelle les modes de mise en page sont référencés est que flexbox est un nouveau mode de mise en page, ce qui permet une plus grande flexibilité lors de la mise en page..
La disposition de la boîte souple nous fournit des techniques simples pour dicter facilement la manière dont les articles doivent être disposés.
Pour forcer un élément à utiliser la mise en page flexbox, nous ajoutons le boîte souple valeur de la propriété display.
#container display: flexbox;
Par défaut, une flexbox est un élément de niveau bloc. nous pouvons définir un élément de niveau en ligne comme ceci:
#container display: inline-flexbox;
Comme dans l'exemple ci-dessus, vous souhaiterez appliquer la présentation de la flexbox au parent des enfants dont vous souhaitez contrôler le positionnement. Regardons simple, exemple en direct.
ul / * Ancienne syntaxe * / display: -webkit-box; / * Nouvelle syntaxe * / display: -webkit-flexbox;
Vous remarquerez que les éléments d’éléments de la liste sont maintenant horizontaux, de la même manière que leur rendu, si nous avions utilisé float: gauche. Les éléments d’éléments de la liste peuvent maintenant être appelés articles flexbox.
Remarque: un descendant direct d'une boîte flexible, qui est positionné de manière absolue, par ex. en utilisant
position: absolue, ne peut pas être un élément flexbox, car il coupe le flux habituel.
Vous remarquerez peut-être que les éléments (les éléments d'élément de liste) ont pris un flux horizontal (la direction du flux est également appelée axe principal). Heureusement, nous sommes en mesure de contrôler ce flux (et donc ce qui est considéré comme l’axe principal) et d’éviter l’utilisation de flotteurs.!
flex direction Nous pouvons appliquer le flex direction propriété et spécifiez la direction dans laquelle nous souhaitons que nos articles de boîte souple soient disposés. La propriété accepte ligne, ligne inverse, colonne et colonne inverse comme des valeurs. La valeur par défaut est rangée.
En utilisant un balisage similaire à l'exemple ci-dessus, nous pouvons ajouter une propriété CSS supplémentaire: paire de valeurs: (flex-direction: column)
ul -webkit-flex-direction: column;
Si vous travaillez bien, essayez de changer le colonne valeur sur le flex direction propriété à inversion de colonne, et observez comment les éléments de flexbox sont affichés dans une disposition en colonnes, mais dans l'ordre inverse.
flex-wrap Par défaut, une flexbox est monoligne. Celui qui ne peut pas contenir ses enfants peut déborder en utilisant le flex-wrap propriété; nous pouvons ordonner à la flexbox de devenir multiligne, auquel cas les éléments flexbox peuvent envelopper. flex-wrap accepte les valeurs, maintenant (la valeur par défaut), emballage Et wrap-reverse.
Remarquez comment, dans la démo, les éléments sont bouclés, car ils ne peuvent pas être contenus dans leur petit 100px parent. À l’aide des outils de développement, essayez d’inverser la débordement caché et -webkit-flex-wrap morceaux. Sans le flex-wrap et débordement propriétés, les éléments débordent de leur parent.
Il y a un raccourci utile pour flex direction et flex-wrap, comme indiqué ci-dessous:
direction de flexion: rangée; flex-wrap: nowrap; // En utilisant les deux valeurs ci-dessus avec le raccourci flex-flow, nous obtenons: flew-flow: row nowrap; // flex-direction: column; enveloppe souple: enveloppe; flex-flow: enroulement de colonne;
Bien que ce ne soit certainement pas le plus beau du monde, cet exemple de menu montre quelques utilisations de la flexbox..
300px a été placé sur la flexbox elle-même pour démontrer l'emballage.direction de flexion: colonne pourrait avoir un sens.
Ce qui serait bien, c’est de demander aux éléments de la boîte souple de s’étaler et d’utiliser l’espace disponible - quelque chose comme cela. C'est ce que la propriété flex est pour.
La flexion est la capacité du conteneur à modifier sa largeur ou sa hauteur pour occuper l'espace disponible. "
le fléchir la propriété est une fonctionnalité intéressante; il offre quelque chose de nouveau qui aurait été difficile à réaliser dans le passé.
Avec cette propriété, nous pouvons définir une taille préférée pour nos articles. N'oubliez pas que la propriété flex est appliquée aux éléments de la boîte de dialogue, pas à la boîte de dialogue elle-même. Le navigateur essaiera de définir la taille des éléments de la flexbox sur un par ligne. Il essaiera ensuite de répartir uniformément l'espace libre restant sur les éléments. Si nous examinons l'exemple de menu et utilisons les outils de développement pour découvrir la largeur calculée des éléments de la flexbox, nous verrons qu'il en est ainsi. 78px. Enquêtons plus loin…
Vous vous demandez probablement, "Comment les éléments de la boîte souple ont-ils gagné leur espace supplémentaire lorsque nous avons défini leur largeur préférée sur 60px?"
60pxflex propriété (c'est un total de 180px).300px. Ça, moins 180px (la taille totale préférée des articles), est 120px. Cependant, il ne semble pas que nous ayons réellement 120px de l'espace libre.marge droite de 10px; c'est un total de 30px pour trois articles, nous laissant avec 90px de l'espace libre.5px - c'est 5px de rembourrage en haut, à droite, en bas et à gauche. Donc, semblable au marge droite propriété, chaque article utilise 10px de rembourrage en ce qui concerne sa largeur. Nous sommes partis avec 60px de l'espace libre - enfin presque.bordure: noir uni 1px - 1px à gauche et à droite. Un total de deux pixels par élément, donc, pour trois éléments, cela revient à 6px. Il nous reste maintenant 54px de l'espace libre.54px d'espace libre, nous pouvons le distribuer également aux trois éléments de la première ligne - c'est 18px, par article, ce qui est maintenant logique pourquoi, lorsque nous fixons une préférence de 60px, la largeur calculée transformée en 78px.Comme vous l'avez peut-être deviné, la dernière ligne (contenant l'élément "Contactez-nous") s'adapte à toute la largeur de la flexbox.
Les articles Flexbox peuvent avoir différentes largeurs; un article avec un fléchir de 2 est dit être deux fois plus flexible comme article avec un fléchir de 1. Ainsi, s’agissant de la distribution d’espace libre entre les deux éléments, l’article avec un fléchir de 1 sera donné la moitié de l'espace que l'élément avec un fléchir de 2 reçoit.
Flexbox nous permet de commander facilement certains éléments à l'aide de CSS, quel que soit leur ordre d'apparition dans le document. Voici un exemple rapide.
Compte tenu du balisage suivant:
ul display: -webkit-flexbox; ul li: nième enfant (1) -webkit-flex-order: 2;
Nous pouvons cibler le premier élément d’élément de liste à l’aide de la pseudo-classe nth-child, puis appliquer le flex-order propriété à elle. Les éléments Flexbox sont, par défaut, à l'ordre 0. En plaçant le premier article de la liste à la commande 2, le navigateur affichera les éléments 2 et 3 en premier, suivis de l'élément 1.
Nous sommes en mesure d’aligner des éléments de boîtes flexibles sur l’axe principal à l’aide du bouton flex-pack propriété. Cette propriété accepte les valeurs suivantes:
La démonstration de ce didacticiel fournit des exemples des différents types d’alignement. En regardant l'exemple jsbin, nous pouvons voir que les éléments n'ont été centrés que sur un axe: l'axe principal. C’est essentiellement l’axe sur lequel sont placés les éléments de la flexbox.
Nous pouvons changer l’axe en ajustant la flex direction propriété. En le mettant à colonne, il devient évident que l'axe principal a changé. Afin d’affecter l’alignement de l’axe transversal (axe perpendiculaire à l’axe principal), nous pouvons utiliser flex-align.
Je devrais être centré
.flexbox display: -webkit-flexbox; -webkit-flex-pack: centre; -webkit-flex-align: center; largeur: 50%; hauteur: 100px; fond: orange; .flexbox p bordure: 1px vert uni; rembourrage: 5px;
Vérifiez définitivement la démo en direct si vous êtes confus.
Merci de votre lecture et assurez-vous de consulter caniuse.com pour obtenir une liste des navigateurs prenant en charge le module flexbox, ainsi que les préfixes des fournisseurs à référencer.
