Disposition non triviale des éléments sur Flexbox sans demandes de médias

Il semblerait, quel article pourrait être sur CSS Flexbox en 2019? Les concepteurs de mise en page utilisent activement cette technologie depuis plusieurs années et tous les secrets doivent être dévoilés.

Cependant, récemment, j'ai eu le fort sentiment que je devais partager un truc non trivial et, à mon avis, utile lié à la flexbox. Un message a été provoqué par le fait que pas une seule connaissance (des étudiants, des typographes et seulement des personnes proches du Web) ne pouvait résoudre le problème lié à la flexbox, même si cela ne prenait que 4 à 6 lignes.

Donc, d'abord l'énoncé du problème, puis l'arrière-plan et, enfin, la solution.

Énoncé du problème

1. Sur le grand écran, deux éléments sont situés horizontalement, tout en s'adaptant sur les téléphones - verticalement.
2. En même temps, sur les grands écrans, ils doivent être pressés contre les bords (comme avec justification-contenu: espace entre) et sur les petits - doivent être centrés (justification-contenu: centre).

Il semblerait, qu'y a-t-il à décider!? Mais il y a une autre condition: vous devez effectuer cette reconstruction en mode automatique - sans requêtes de médias.

Pourquoi, demandez-vous? Pourquoi ces astuces avec l'interdiction des requêtes médias, pourquoi flexbox pour le plaisir de flexbox?

Et le fait est que la largeur du contenu peut être dynamique . Par exemple, le titre et la date des nouvelles sont côte à côte. Le format de la date est clairement défini et les en-têtes peuvent varier considérablement en longueur. Je souhaiterais que le transfert ne concerne que les postes où les éléments ont commencé à être étroitement liés.



Et ici, après tout, une requête multimédia n'aidera en aucune façon, car la largeur de l'écran sur lequel la reconstruction a lieu dépend de la longueur du texte. Habituellement, dans ce cas, la demande de média est placée avec une marge, en se concentrant sur le titre le plus long possible. Pour les titres courts, cela semble moyen.

Autre exemple frappant: le logo et le menu dans l'en-tête. La largeur du logo est connue, mais le problème avec le menu. En effet, nous faisons souvent la mise en page sur un modèle formellement complété, mais en réalité le menu sera formé à partir du panneau d'administration du site. Combien de points - personne ne sait , par conséquent, la largeur de la reconstruction n'est pas claire.



Il est clair que sur un site réel, le menu sera toujours transformé en bouton pour la version mobile. Mais à quelle largeur cette transformation doit-elle se faire si l'on ne connaît pas le nombre de points? Si nous sommes en retard avec cette transformation, j'aimerais que le menu vole magnifiquement pendant un certain temps, et pas de toute façon.

Souvent, lors de la résolution de tels problèmes, les gens ne se fatiguent pas. Soit ils font une demande médiatique à l'avance, avec une marge énorme au point d'impact, soit ils se contentent de centrer un seul élément sur deux.

La méthode 1 est tout simplement incommode, la méthode 2 sera plus ou moins normale pour un exemple avec des en-têtes et des dates, mais ce sera juste terrible pour le logo et le menu.

Donc, l'énoncé du problème. Comment organiser le comportement parfait des éléments sur flexbox sans requêtes média: les placer visuellement sur les bords du grand écran et les centrer sur l'impact? (Eh bien, ou presque parfait, en raison de l'utilisation de l'alignement du texte et de l'agrandissement flexible, de petites restrictions apparaîtront, qui peuvent être facilement résolues avec un wrapper supplémentaire)

Contexte

J'ai voulu réaliser ce comportement des éléments dès ma rencontre avec flexbox il y a quelques années. Cependant, les expériences et les manuels de lecture n'ont pas donné de résultats. En conséquence, il a été conclu qu'un seul élément pourra devenir centré lors du saut et que l'autre restera sur le bord.

Il manquait toujours quelque chose pour obtenir un comportement parfait. Flex-Grow vous aidera sur un écran et vous fera du mal sur un autre. Marge: aide à l'alignement automatique et au texte, mais elles ne suffisent pas pour obtenir le résultat.

En conséquence, comme la plupart des codeurs le pensent, j'ai décidé que le flex ne pouvait tout simplement pas le faire. Et j'ai réussi à oublier cette tâche, ayant appris à faire avec d'autres moyens et techniques de mise en page.

L'inspiration est venue à l'été 2019, lorsque, en analysant les devoirs sur le cours de mise en page, j'ai vu le flex-grow appliqué en aucun cas: 0,5 . Dans cet exemple, la cupidité de 0,5 n'a pas beaucoup aidé à résoudre le problème, cependant, j'ai immédiatement senti qu'il était l'ingrédient secret qui manquait toujours. Non pas que je ne savais pas que la croissance peut être fractionnée. Je ne pensais tout simplement pas que 0,5 peut aider à réaliser un arrangement idéal! Maintenant, cela semble évident, car flex-grow: 0,5 est la capture d'exactement la moitié de l'espace libre ...

En général, quand j'ai vu flex-grow: 0,5, en 10 minutes, j'ai complètement résolu la tâche d'arranger les éléments, qui depuis 2014 était considérée comme insoluble. Voyant que le code était très simple et concis, j'ai décidé que j'avais inventé un vélo connu depuis longtemps. Mais encore, il y a quelques jours, j'ai décidé de vérifier à quel point il était connu des concepteurs de mise en page et j'ai lancé un développement interactif sur ma chaîne youtube pour le développement web avec 45 000 abonnés.

J'ai fixé la tâche, j'ai commencé à attendre. Et aucun des abonnés ne l'a décidé. Les concepteurs de mise en page ne l'ont pas résolu non plus. Il y avait un sentiment croissant que les gens ne savaient tout simplement pas comment positionner parfaitement les éléments à l'aide de flex. Et ce message a mûri. Après tout, il me semble maintenant qu'un grand nombre de typographes estiment qu'il est tout simplement impossible d'organiser des éléments sans interrogation de média comme décrit dans l'énoncé du problème.

La solution dont nous discuterons ci-dessous est assez universelle. Parfois, cela nécessite la création d'un wrapper supplémentaire pour centrer le texte ou afficher correctement l'arrière-plan. Mais souvent, il est possible de s'entendre avec seulement 6 lignes de code CSS sans changer la structure.

Solution basique

Prenons un petit morceau de HTML comme base. Ceci est un exemple que nous avons vu dans la toute première image gif. La date et le titre sont pressés sur les bords, et lors du saut, ils doivent devenir centrés.

<div class="blog"> <div class="blogItem"> <div class="blogItem__cat">Article posted in: PHP Programming</div> <div class="blogItem__dt">21.10.2019</div> </div> <div class="blogItem"> <div class="blogItem__cat">Article posted in: Javascript</div> <div class="blogItem__dt">22.10.2019</div> </div> <div class="blogItem"> <div class="blogItem__cat">Article posted in: wft my programm don't work</div> <div class="blogItem__dt">23.10.2019</div> </div> </div> 

Nous omettons les styles inintéressants associés aux arrière-plans, aux cadres, etc. La partie principale de CSS :

 .blogItem { display: flex; flex-wrap: wrap; } .blogItem__cat { flex-grow: 0.5; margin-left: auto; } .blogItem__dt { flex-grow: 0.5; text-align: right; } 

Lorsque vous voyez ce code pour la première fois, vous pourriez avoir l'impression qu'il n'a pas été écrit par une personne, mais par un générateur délirant de propriétés CSS aléatoires! Par conséquent, nous devons absolument comprendre comment cela fonctionne!

Je vous suggère d'abord d' étudier attentivement l'image , et ensuite de passer à la description textuelle située en dessous.



Au départ, les articles flexibles se tiennent côte à côte et prennent la taille en fonction de leur contenu. flex-grow: 0,5 donne à chaque élément la moitié de l'espace libre, c'est-à-dire il n'y a pas d'espace libre lorsqu'ils se trouvent à proximité. C'est extrêmement important car margin-left: auto ne fonctionne pas du tout tant que les éléments sont placés sur la même ligne .

Le premier élément est immédiatement parfait, le contenu du second doit être cloué sur le bord droit en utilisant text-align: right . En conséquence, nous avons obtenu un analogue de justifier-contenu: espace entre, sans écrire du tout justifier-contenu.

Mais des miracles encore plus grands commencent lorsque les éléments sautent sur des lignes distinctes. Marge-gauche automatique pousse le premier élément aussi loin que possible du bord gauche. Allez, allez, combien d'espace nous reste-t-il? 100% moins la taille de l'élément moins à moitié libre de la croissance = à moitié libre ! Voici l'alignement!

Le deuxième élément est sur le bord gauche et occupe un espace égal à sa taille de base, plus la moitié libre. C'est difficile à croire, mais text-align: right enverra l'élément parfaitement centré!

Si quelqu'un ne croit toujours pas, voici un lien vers un exemple de travail . On y voit clairement que les éléments sautent au bon moment et sont idéalement centrés.

La clé pour créer une telle solution est flex-grow: 0.5, sans laquelle il n'est pas possible de désactiver la marge- [gauche-droite] automatique sur les grands écrans. Un autre fait fantastique est que le contenu de justification n'est pas utilisé du tout . Le paradoxe total de la situation est que toute tentative d'aligner le contenu avec le contenu justifié brisera notre schéma.

Avec exactement les mêmes propriétés, nous pouvons assembler des éléments plus grands et plus complexes, par exemple, le menu et le logo - un lien vers le bac à sable . J'insiste encore une fois sur le fait que le menu devra encore être transformé en bouton, mais maintenant nous sommes beaucoup moins inquiets du fait qu'il vole vers le bas plus tôt que nécessaire. Après tout, même après avoir décollé, le menu a l'air très bon!

Solution améliorée

Dans les commentaires sur l'interactif sur YouTube, ils ont rapidement remarqué que le texte n'était correctement positionné que jusqu'à ce que le titre soit placé sur une seule ligne sur un petit écran. Sur les nouvelles lignes, le texte est poussé vers la gauche.



Si le titre était à l'origine le deuxième élément (situé à droite de la date), alors text-align: right agirait sur lui, à cause de quoi le texte serait encore plus étrange. Soit dit en passant, nous ne pouvons pas définir l'arrière-plan et la date en raison de la flex-croissance 0.5.

Cependant, tout cela est facilement résolu en créant un enfant avec des propriétés

 some-selector { display: inline-block; text-align: center } 

En raison du blocage de ligne, un tel élément est obtenu exactement en taille du contenu et, ce qui est très important, l'alignement du texte du parent le place au bon endroit. Et déjà à l'intérieur de l'élément, nous utilisons l'alignement de texte dont nous avons besoin, le plus souvent au centre.

Il est important que nous ne sentions pas le travail de cet alignement de texte interne tant qu'il n'y a qu'une seule ligne dans l'élément flex.

Soit dit en passant, l'inline-flex est très bien aussi!

Exemples de code

• alignement parfait
• arrière-plan normal (juste par exemple, l'arrière-plan semble moyen pour le titre)

Ce schéma augmente la polyvalence de la solution, mais il n'est pas toujours nécessaire. Par exemple, il est difficile d'imaginer un menu composé de deux lignes, par conséquent, un wrapper ne nous sauvera pas - vous devez transformer le menu en bouton.

Réflexions supplémentaires

Indentation

Maintenant, les éléments avant de sauter sur des lignes distinctes se rapprochent les uns des autres. Comment ajouter un retrait entre eux sans les éloigner des bords du conteneur?
Cette tâche est facilement résolue par la technique classique: rembourrage - aux éléments et marge négative - au parent. Exemple prêt .

Miroir

Bien sûr, n'importe lequel de nos exemples peut être mis en miroir par wrap-reverse, flex-direction, margin-right: auto, etc. Par exemple, le menu au-dessus du logo semble bon .

Conclusion

Cette technique n'est qu'une solution intéressante à un problème particulier. Bien sûr, ne refusez pas les demandes des médias et croyez en flexbox sans média. Mais dans les exemples considérés, à mon avis, cette solution semble très intéressante.

Il existe également une analyse vidéo détaillée de cette technique. Cependant, je n'étais pas sûr que dans le premier article sur le hub, vous devriez donner un lien vers la chaîne youtube, j'ai donc essayé d'ajouter plus de photos au message, y compris gif.

J'espère que le schéma de travail avec les éléments flexibles sera utile et facilitera la vie des concepteurs de mise en page lors de la résolution de certains problèmes!