Jusqu’à relativement peu, nous pourrions même dire « toujours » si votre développement nécessite une compatibilité élevée dans les anciennes versions de navigateurs, des modules personnalisables de Maquette pour les sites Web en tant que listes de lignes de lignes de N blocks, il créait une longue liste de styles CSS qui ont changé en fonction de la résolution des différents périphériques. Parfois, « nous flottons » les éléments et nous les avons vu avec les marges latérales, dans d’autres, nous avons appliqué « Bloc en ligne » et nous Utilisé une technique étrange de manière à ne pas avoir la séparation créée entre couches de Magic, nous avons ajouté une couche vide à la fin de la liste pour justifier l’ensemble et une longue etcethere d’inconvénients que Flexbox vient à résoudre.
Qu’est-ce que FLEXBOX et comment il est utilisé.
flexbox provient de « la disposition de la boîte flexible », qui peut être traduite par « conception de boîte flexible » et nous donne une solution magnifique pour Tous nos développements « sensibles ». Ce qui nous permet est de créer un ensemble d’éléments flexibles qui s’adaptent automatiquement à votre conteneur et avec lesquels nous pouvons contrôler des paramètres tels que l’alignement, la direction (horizontale / verticale), le réglage de la ligne en fonction de la taille et de nombreuses possibilités que nous allons Présent dans cet article.
En termes de compatibilité, Flexbox est actuellement compatible avec les navigateurs Web les plus importants et les différentes versions de ceux-ci, bien que nous devons utiliser des préfixes CSS pour leur bon fonctionnement (voir dans CaniUtilise .com ). Si vous rencontrez des problèmes avec des anciennes versions, vous pouvez essayer d’utiliser « Autoprefixer ». En los siguientes ejemplos utilizaremos el código css tal cual, sin añadidos, así que espero que vuestro navegador esté actualizado.
La última definición conocida sobre Flexbox del W3C es del 26 de Mayo de 2016 en el momento de escribir cet article. Dans le lien, nous pouvons voir sa définition et différents exemples d’utilisation. Comme indiqué dans l’introduction, jusqu’à présent, nous connaissions quatre manières de disposer des éléments, trois présentations (avec des variations alternatives) et une autre position:
- – éléments en ligne (affichage: Inline)
- – Éléments de bloc (Affichage: Bloc)
- – Éléments dans le tableau (Affichage: Tableau)
- – Types de position (Position: Absolute / Relative / Fixe)
Flexbox est un mélange de toutes quant à la manière dont il affecte la disposition d’une structure d’éléments contenus dans une couche parent ou conteneur, et est défini comme « Flex » sur la propriété « Affichage ». (Affichage: flex). Nous pouvons créer une structure d’élément en ligne similaire à une table ou les faire fonctionner comme un bloc et dans l’ordre inverse dans la résolution suivante, tout cela s’adapte automatiquement à la taille dont nous avons besoin, à la fois en largeur et en hauteur. Oui, aussi en hauteur! 😉
Le W3C définit cette structure en tant que « débit flexible » d’éléments dans la direction (haut / bas / gauche / gauche) et taille (largeur / hauteur) selon les axes principaux (horizontaux) et transversaux (vertical).
comme si pour approfondir votre définition, je vous ai ajouté sur le lien W3C, nous irons directement pour voir des exemples de fonctionnement.
Exemples de la mise en page à l’aide de flexbox.
IMPORTANT: Si vous n’ayez pas les exemples suivants correctement, il est fort probable que votre navigateur n’est pas compatible avec cette Propriété CSS. S’il vous plaît, essayez de le mettre à jour ou de la voir dans un autre navigateur avant d’augmenter l’auteur. 😛
Pour pouvoir essayer toutes les possibilités offertes par Flexbox CSS, nous allons créer une classe = « conteneur » couche qui rendra des couches de père et de sept classes = « élément » numéroté. Et pourquoi sept? Pour les exemples, il est bon pour nous d’être un nombre impair pour voir à la fois l’ordination et l’adapation Turus et son résultat, et sept aussi pour voir une liste d’éléments non très courts, bien que vous puissiez essayer de placer n’importe quel nombre d’articles.
html:
<div class=”contenedor”> <div class="elemento">1</div> <div class="elemento">2</div> <div class="elemento">3</div> <div class="elemento">4</div> <div class="elemento">5</div> <div class="elemento">6</div> <div class="elemento">7</div></div>
au-delà des styles de conception définis pour l’affichage des exemples, nous allons démarrer une taille de largeur de 25% pour les éléments par rapport au conteneur parent. Pour commencer à utiliser Flexbox, nous ajoutons la propriété « Affichage: Flex » dans le conteneur
EXEMPLE 1:
.contenedor{ display:flex;}.elemento{ width:25%;}
Exemple 1:
Comme nous le voyons, n’ayant pas défini le comportement de la direction et de la taille que les éléments de notre conteneur auront, bien que nous ayons défini une largeur d’éléments de 25%, ils s’adaptent à leur père occupant une largeur de 100% entre la somme de tout . Par défaut, il a ce comportement « flexible » car il indique son nom. Mais Flexbox est beaucoup plus.
flex-direction:
Nous verrons la propriété « Flex-direction », qui peut prendre 4 valeurs et s’applique au parent:
- – flex-direction: rangée; – > Les éléments sont affichés de gauche à droite (valeur par défaut, similaire à celle de l’exemple 1)
- – Flex-direction: ROW-INTERVER; – > Les éléments sont affichés de droite à gauche.
- – Flex-direction: colonne; – > Les éléments sont affichés de haut en bas.
- – flex-direction: colonne-inverse; – > Les éléments sont affichés à partir des éléments de bas en haut.
exemple CSS Exemple 2:
.contenedor{ display:flex; flex-direction:row-reverse;}
Exemple 2:
Les éléments investissent votre ordre d’affichage de droite à gauche, sans prendre en compte l’ordre de la mise en page.
EXEMPLE 3 CSS 3 :
.contenedor{ display:flex; flex-direction:column;}
Exemple 3:
Les éléments sont affichés en formant une colonne de haut en bas. Dans ce cas, les éléments mesurant 25% du conteneur, sa largeur oui qui prend la valeur indiquée. Si nous supprimons la largeur, les couches s’adapteront à la taille du conteneur, occupant 100% de largeur.
EXEMPLE CSS 4:
.contenedor{ display:flex; flex-direction:column-reverse;}
Exemple 4:
Les éléments sont affichés en formant une colonne de bas en haut, sans prendre en compte l’ordre de la mise en page. La largeur fonctionne de la même manière à l’exemple 3.
Flex-Wrap:
Voir la propriété « Flex-Wrap », dont la valeur affecte la manière dont les éléments sont distribués dans une rangée et, par conséquent , à une taille. Les valeurs possibles sont les suivantes:
- – flex-wrap: Nowrap; – > Les éléments sont affichés en ligne, en une seule ligne et sa taille est ajustée au conteneur tant que la somme de tous est supérieure à 100% de la largeur de la largeur de la largeur de la largeur de la largeur. le conteneur. S’il est inférieur, ils montrent toujours en ligne mais conservent leur taille. Ceci est la valeur par défaut et, comme nous l’avons vu dans l’exemple 1, bien que la largeur des éléments soit de 25% du conteneur, tous sont indiqués en ligne en modifiant leur taille de sorte que la somme totale ne soit pas supérieure à 100% de son conteneur .
- – Flex-wrap: enveloppe; – > Les éléments sont affichés en ligne, mais si votre largeur dépasse celle du conteneur, elles sont distribuées dans plusieurs lignes.
- – Flex-Wrap: Wrap Inverse; – > Les éléments sont affichés en ligne, mais si leur largeur dépasse celle du conteneur, elles sont distribuées dans plusieurs lignes, elles le font également dans l’ordre inverse de la mise en page.
exemple CSS Exemple 5:
.contenedor{ display:flex; flex-wrap:wrap;}
Exemple 5:
Comme nous l’avons commenté dans le Valeurs de la propriété, dans ce cas, les éléments sont affichés en ligne, mais comme nous avions attribué une valeur de 25% de largeur du conteneur sur les éléments, lorsque la ligne termine les éléments continuent dans une autre, et ainsi de suite.
EXEMPLE CSS 6:
.contenedor{ display:flex; flex-wrap:wrap-reverse;}
Exemple 6:
Cet exemple de gestion de flexbox est très curieux, comme bien pour rendre l’adaptation de tailles par rangée comme dans le cas précédent, il effectue son ordre ordonné, de bas en haut, et dans ce cas de gauche à droite (qui est le sens par défaut).
Nous peut modifier le sens de l’orientation horizontale si nous utilisons également « f Direction Lex: Row-Reverse « Comme nous pouvons le constater dans l’exemple suivant:
EXEMPLE 7:
Exemple 7:
Flex-Flow:
Ces mêmes propriétés peuvent les spécifier en un seul au moyen de « flex-flow » de la manière suivante:
Flex-Flow: < Flex-direction >
flex-wrap >
Donc, le code précédent pourrait être le suivant:
CSS:
.contenedor{ display:flex; flex-flow:row-reverse wrap-reverse;}
Justify-Contenu:
comme pour l’alignement horizontal des éléments de Flexbox, nous trouvons la propriété « Justify-Content », qui aligne les éléments le long de l’axe principal (axe principal) de son conteneur, Mais contrairement à l’alignement d’un texte, vous devez également prendre en compte la direction des éléments. Nous le verrons plus clairement avec les exemples suivants après la définition de leurs valeurs les plus couramment utilisées:
- – Justify-Content: Flex-Start; – > alignez les éléments horizontalement du début de l’adresse de l’axe principal de votre conteneur (à partir du début de la ligne). Ceci est la valeur par défault. Il est important de noter que, comme nous le verrons plus tard, l’adresse établie dans « la direction flexible » affecte l’alignement.
- – Justify-content: flex-extrémité; – > alignez les éléments horizontalement de l’extrémité de l’adresse de l’axe principal de votre conteneur (à partir de la fin de la ligne)
- – Justify-Content: Centre ; – > Alignez les éléments au centre de l’axe principal de votre conteneur. Similaire à un texte aligné sur le centre.
- – Justify-Contenu: espace-entre; – > Alignez les éléments les justifiant le long de l’axe principal de votre conteneur. Semblable à un texte justifié. Les éléments latéraux sont bloqués aux extrémités et les autres sont répartis le long de l’axe principal, laissant le même espace entre eux.
- – Justify-Content: espace-autour; – > alignez les éléments distribuant leurs centres horizontalement le long de l’axe principal de leur conteneur, laissant le même espace de séparation au début, à la fin et entre eux.
Cette propriété est mieux comprise est d’un exemple, puisque si nous essayons « justifiante-contenu: flex-start » avec le reste des propriétés par défaut, nous obtiendrons un résultat similaire à l’alignement d’un texte sur la gauche? Mais … que si l’adresse est inverse? Dans ce cas, nous obtiendrons que l’alignement serait à droite, car ce que Flexbox prend en compte l’alignement des éléments est le début de la direction d’essieu (que ce soit Primer-ou transversal -vertical–vertical-, comme nous le verrons plus tard).
exemple CSS Exemple 8:
.contenedor{ display:flex; flex-direction:row; flex-wrap:wrap; justify-content:flex-start;}
Exemple 8:
Dans ce cas, nous voyons que l’alignement des éléments est à gauche de votre conteneur. Nous allons maintenant investir la direction du même médiant E « Flex-direction: Row-Reverse » et nous verrons ce qui se passera:
EXEMPLIER CSS 9:
.contenedor{ display:flex; flex-direction:row-reverse; flex-wrap:wrap; justify-content:flex-start;}
Exemple 9:
Nous voyons que dans ce cas, les éléments sont alignés à droite. Vous pouvez penser que « justifier le contenu: flex-start » ne fait vraiment rien, puisque dans les exemples 1 et 2, nous avons déjà obtenu ces résultats sans avoir besoin de cette propriété, mais … Et si nous voulons l’adresse des éléments Inverse mais sont alignés à gauche? Si nous modifions la propriété sur « Justify-Content: Flex-End » Nous obtenons ce résultat, vérifiant qu’il fonctionne vraiment:
exemple CSS 10:
.contenedor{ display:flex; flex-direction:row-reverse; flex-wrap:wrap; justify-content:flex-end;}
Exemple 10:
ci-dessous Nous vérifions via des exemples les valeurs d’alignement horizontal que nous avons déjà constatées, apportant des modifications dans la largeur de Les éléments pour que ses effets peuvent être mieux compris. Premièrement un alignement au centre:
EXEMPLE CSS 11:
.contenedor{ display:flex; flex-direction:row; flex-wrap:wrap; justify-content:center;}.elemento{ width:21%;}
Exemple 11:
Maintenant, nous verrons un alignement « justifié ». La séparation entre la ligne supérieure et la ligne inférieure est différente due au nombre d’éléments entre eux:
EXEMPLE CSS 12:
.contenedor{ display:flex; flex-direction:row; flex-wrap:wrap; justify-content:space-between;}.elemento{ width:21%;}
exemple 12:
et maintenant un alignement distribuant ses centres horizontaux. Dans ce cas, nous pouvons voir qu’une sorte de » marges latérales similaires « est créée entre le Éléments (et entre les lignes, en fonction du nombre d’éléments existant dans chacun d’eux).
EXEMPLE CSS 13:
.contenedor{ display:flex; flex-direction:row; flex-wrap:wrap; justify-content:space-around;}.elemento{ width:21%;}
Exemple 13:
Align-items | Align-auto | Contenu alignée:
alignement vertical est effectué à travers la soi-disant « coupe transversale » (axe croisé), et pour cela, nous avons trois propriétés différentes « Align-items », « Align-Self » et « align-contenu ». Voici le désordre, car si le concept n’est pas compris, des résultats inattendus sont souvent obtenus. Voyons ce que le W3C nous dit de ces propriétés:
- – « Align-items » définit l’alignement par défaut pour tous les éléments du conteneur, y compris des éléments indépendants.
- – « Align-auto » permet d’aligner des éléments indépendants du conteneur.
- – « Align-Tense » aligne les lignes / rangées d’éléments d’un conteneur.
par conséquent, « Align-items » sert à aligner les éléments et « aligner-content » pour aligner les lignes de ceux-ci, tandis que « Align-Self » nous permet d’aligner des éléments de manière indépendante. Connaissant cela, nous pouvons déduire que « l’alignement de contenu » ne fonctionne que lorsque nous avons plus d’une rangée d’éléments. L’image supérieure représente très bien comment ces propriétés fonctionnent. Ensuite, nous verrons les valeurs que chacun d’entre eux peut prendre ( Les valeurs de « Align-items » sont valables pour « Align-Self »):
- – Align-items: Stretch; – > Valeur par défaut. La hauteur des éléments est ajustée à la taille du conteneur (ou de la rangée), divisant l’espace laissé sur tous les éléments de manière égale.
CSS Exemple 14:
.contenedor{ height:240px; display:flex; flex-flow:row wrap; justify-content:flex-start; align-items:stretch;}.elemento{ width:21%;}
Exemple 14:
- – Align-item: flex-start; – > aligne les éléments du début de la direction de l’essieu transversal de votre conteneur (comme elle s’est produite à horizontale). Il affecte également la valeur de « direction flexible » à la direction de l’alignement vertical.
exemple CSS 15:
.contenedor{ height:240px; display:flex; flex-flow:row wrap; align-items:flex-start;}.elemento{ width:21%;}
Exemple 15:
- – Align-items: flex-extrémité; – > aligne vertical les éléments de la fin de la adresse de l’axe transversal de votre conteneur (comme elle s’est produite dans horizontale).
EXEMPLE CSS 16:
.contenedor{ height:240px; display:flex; flex-flow:row wrap; align-items:flex-end;}.elemento{ width:21%;}
Exemple 16:
- – Align-items: Centre; – > Alignez le centre vertical Les éléments le long de l’essieu transversal de votre conteneur .
CSS Exemple 17:
.contenedor{ height:240px; display:flex; flex-flow:row wrap; align-items:center;}.elemento{ width:21%;}
Exemple 17:
- – Align-items: Baseline; – > aligne verticalement les « lignes de base » des éléments le long de l’essieu transversal de votre conteneur. Afin de comprendre cet exemple, nous ajouterons des styles différents aux éléments:
exemple CSS 18:
.contenedor{ height:240px; display:flex; flex-flow:row wrap; align-items:baseline;}.elemento{ width:21%; line-height:2rem;}.elemento:first-child{ line-height:4rem;}.elemento:nth-child(3){ font-size:1rem; line-height:1.2rem;}.elemento:nth-child(6){ font-size:3rem; line-height:5rem;}.elemento:last-child{ line-height:3rem;}
Exemple 18:
Comme nous pouvons l’observer, ce qui est aligné en vertical est la base du contenu de chaque élément, dans ce cas, la base de chaque numéro, bien qu’elles ont des hauteurs de différentes lignes ou tailles.
Nous sommes allés voir la description des valeurs de la propriété « Contenu align-content »:
- – Align-content: Stretch; – > Valeur par défaut. La hauteur des lignes est conforme à la taille du conteneur, divisant l’espace excédentaire entre toutes les lignes de manière égale.
EXEMPLE DE CSS 19:
.contenedor{ height:240px; display:flex; flex-flow:row wrap; align-content:stretch;}.elemento{ width:21%;}
Exemple 19:
- – Align-Contenu: flex-start; – > aligne les lignes en verticale à partir du début de l’adresse de l’axe transversal de votre conteneur.
EXEMPLE DE CSS 20:
.contenedor{ height:240px; display:flex; flex-flow:row wrap; align-content:flex-start;}.elemento{ width:21%;}
Exemple 20:
- – Contenu aligné: flex-extrémité; – > alignez les lignes en verticale de l’extrémité du sens de l’axe transversal de votre conteneur.
CSS Exemple 21:
.contenedor{ height:240px; display:flex; flex-flow:row wrap; align-content:flex-end;}.elemento{ width:21%;}
Exemple 21:
- – Align-Contenu: Centre; – > aligne les rangées le long de l’axe transversal de votre conteneur.
exemple CSS Exemple 22:
.contenedor{ height:240px; display:flex; flex-flow:row wrap; align-content:center;}.elemento{ width:21%;}
Exemple 22:
- – Contenu aligné: espace-entre; – > alignez les lignes qui les justifient le long de l’axe transversal de votre conteneur. Semblable à un texte justifié vertical. Les rangées supérieure et inférieure collent à leurs extrémités et que le reste est réparti le long de l’axe transversal, laissant le même espace entre eux.
EXEMPLE DE CSS 23:
.contenedor{ height:240px; display:flex; flex-flow:row wrap; align-content:space-between;}.elemento{ width:21%;}
Exemple 23:
- – Contenu aligné: espace-autour; – > alignez les lignes distribuant leurs centres verticalement le long de l’axe transversal de leur conteneur, laissant le même espace vertical de séparation au sommet, inférieur et entre eux.
CSS Exemple 24:
.contenedor{ height:240px; display:flex; flex-flow:row wrap; align-content:space-around;}.elemento{ width:21%;}
Exemple 24:
Les propriétés les plus curieuses et intéressant de Flexbox.
Jusqu’à présent, nous avons vu des propriétés qui influencent la direction, l’alignement et la taille des éléments et des lignes (et bien que nous n’ayons pas entré en détail, des colonnes) d’un conteneur Flexbox. Mais nous verrons ensuite des propriétés impressionnantes, car avec eux, nous pouvons modifier des éléments indépendamment en augmentant les possibilités de présentation de sites Web et d’interfaces.
Ordre:
entre ces propriétés est trouvée « Commande » Et comme nous avons pu vérifier avec Flexbox, nous ne nous soucions pas de l’ordre de la mise en page de nos éléments et nous pouvons modifier cet ordre avec juste une instruction. Qui soulève la main qui n’avait pas payé pour avoir cette propriété et oublier JQuery Wrap / Det-déroulement 😉
- – Commande: – > Positionnez un élément dans le Ordre attribué par l’entier spécifié dans la propriété, en tenant compte de la valeur attribuée au reste des éléments, dont la valeur par défaut est 0 (zéro). Cela signifie que, à moins qu’une commande ne soit spécifiée à tous les éléments, tout numéro appliqué à un seul élément vous conduira à la dernière position. En effet, par défaut, ils ont tous « zéro », donc si nous assignons par exemple « ordre: 3 » à n’importe quel élément, il sera placé à la fin de la liste. Plus qu’une commande, nous pourrions appeler cela une « valeur de position d’ordination ».L’exemple suivant peut être utilisé pour mieux comprendre cette propriété:
exemple CSS 25:
.contenedor{ display:flex;}.elemento:nth-child(even){ order:1;}
Exemple 25:
Avec cet exemple, nous pouvons mieux comprendre le fonctionnement de cette propriété et que nous attribuons la commande / position « 1 » à toutes les paires, qui sont situées après les éléments impairs, qui seraient être par défaut la valeur « 0 ».
flex:
Ensuite, nous verrons la propriété « Flex » appliquée aux éléments du conteneur et que, à son tour, est structuré à partir de trois Différentes propriétés et pouvant être présentées séparément, « Flex-Grow », « Flex-Shrink » et « Flex-Base », et sont définies comme suit:
- – Flex: Aucun | < flex-poussculez >
flex-shrink > < flex-base >
Nous verrons les propriétés séparément:
- – flex-grandir: < numéro
= « b03fc18c8e »>
; – > détermine le facteur de taille d’un ou plusieurs éléments par rapport au reste en tenant compte de l’espace « vide » ou « libre » entre eux. En tant qu’espace « vide / libre », nous nous référons à l’espace qui n’occupe pas les éléments par rapport à sa ligne. Lorsque cette valeur est omise, elle est définie sur 1.
- – flex-rétrécissement: < numéro
= « b03fc18c8e »>
; – > détermine le facteur de taille de l’un ou plusieurs éléments par rapport à Le reste prenant en compte l’espace « vide » ou « libre » entre eux. Lorsque cette valeur est omise, elle est définie sur 1.
- – flex-base: auto | 0 | < largeur > – > Spécifie la taille principale initiale des éléments en tenant compte du » vide « ou « libre » espace entre eux. Lorsque cette valeur est omise, elle est définie sur 0. Cette propriété le rend en fonction de la valeur attribuée, la taille « base » est interprétée comme « tout espace » de l’élément ou comme « l’espace excédentaire » « De cela. Ensuite, nous voyons un graphique où explique visuellement comment ces valeurs sont interprétées par rapport à la taille de l’élément.
Cette propriété « Flex » peut fonctionner de différentes manières en fonction de la valeur que nous avons définie et que nous ne pouvons pas présenter tous les exemples possibles pouvant se produire. La meilleure chose dans ce cas est que vous essayez directement de modifier vos valeurs. avec une mise en page de base et peut donc être capable d’observer votre comportement. Nous vous proposons un point de départ comme l’exemple suivant avec lequel vous pouvez commencer à jouer avec l’inspecteur de contenu de votre navigateur:
CSS Exemple 26:
.contenedor{ display:flex;}.elemento{ flex:1 1 0;}.elemento:nth-child(4){ flex-grow:3;}exemple 26:
flexbox. La solution optimale pour la conception personnalisable.
Comme nous l’avons vu Dans cet article, Flexbox C’est le complément idéal pour la mise en page de modules de contenu de liste différents et à travers de petites propriétés pour pouvoir changer. Son apparence, sa distribution, sa taille et son alignement de manière à pouvoir suffire sans problèmes sur le dispositif où nous le visualisons, mais ce n’est qu’un petit exemple de tout ce que nous pouvons développer. Avec l’imagination et la pratique, vous pouvez appliquer à une multitude de casuistics et réduire le temps de développement très sensiblement. J’espère que cela sert des / connaisseurs de cette technique CSS en tant que guide de consultation. Salutations!
- – flex-grandir: < numéro