Faire de la largeur et des articles flexibles jouent bien ensemble

Réponse courte: flex-shrink et flex-basis sont probablement les solutions que vous recherchez.

Réponses détaillées

Supposons que vous souhaitiez que l'image et le texte soient disposés côte à côte comme ceci:

Maintenant, disons que vous utilisez Flexbox pour y parvenir. Définition de l'élément parent à display: flex; est un bon début.

 <code>.container { display: flex; }</code>

s'avérer……

Oups! Ok, je pense que c'est acceptable. Il est logique que l'image soit proche du texte, car nous ne définissons pas la largeur de l'image. Idéalement, nous voulons que l'image ait une largeur fixe et le texte prend ensuite l'espace restant.

Ok, faisons-le!

 <code>.container { display: flex; } img { width: 50px; margin-right: 20px; }</code>

Cela a fière allure dans Chrome. Mais attendez, quoi? Si nous vérifions la balise d'image dans Firefox Devtools, nous constaterons que ce n'est pas du tout la valeur de largeur que nous définissons:

Nous pouvons utiliser min-width pour forcer l'image à atteindre la largeur de 50px que nous voulons:

 <code>img { min-width: 50px; margin-right: 20px; }</code>

Cependant, cela ne fera que contribuer à définir la largeur, nous devons donc également ajouter une marge.

 <code>img { min-width: 50px; margin-right: 20px; }</code>

C'est ça. Mieux à Firefox, et travaille toujours dans Chrome.

Réponses plus détaillées

J'ai réalisé que l'image est comprimée car nous devons utiliser flex-shrink pour dire aux éléments Flex pour ne pas réduire la taille, qu'ils aient ou non une largeur.

flex-shrink de tous les projets Flex est 1. Nous devons définir l'élément d'image sur 0:

 <code>.container { display: flex; } img { width: 50px; margin-right: 20px; flex-shrink: 0; }</code>

De mieux en mieux! Mais nous pouvons toujours apporter plus d'améliorations.

Réponse finale

Nous pouvons l'organiser davantage car flex-shrink est inclus dans flex Abréviation.

 <code>flex: none | [ ? || ]</code>

Si nous définissons la valeur flex-shrink sur 0 et définissons flex-basis sur la largeur par défaut que nous voulons que l'image ait, alors nous pouvons nous débarrasser complètement de width .

 <code>.container { display: flex; } img { flex: 0 0 50px; margin-right: 20px; }</code>

Oh ouais:

Un autre exemple

flex-shrink résout beaucoup d'autres problèmes, et il est très important si vous souhaitez commencer à utiliser Flexbox. Voici un autre exemple de pourquoi: je suis tombé sur une autre question similaire à ce qui précède, que j'ai mentionné dans ma récente newsletter. Je construis un composant de navigation qui permet à l'utilisateur de faire défiler plusieurs projets à gauche et à droite. En vérifiant mon travail, j'ai remarqué les problèmes suivants:

Les articles de navigation plus longs ne devraient pas s'envelopper comme ça - mais j'ai finalement compris pourquoi cela se produit, grâce aux questions précédentes. Si vous définissez flex-shrink sur 0, il indiquera à chaque élément de cette navigation non pas pour rétrécir, mais pour prendre la largeur du contenu, comme suit:

Oui, nous pouvons faire à nouveau la mesure supplémentaire pour utiliser l'attribut flex , cette fois en utilisant auto comme flex-basis car nous voulons considérer autant d'espace que possible pour tous les éléments lors de l'allocation de l'espace dans le conteneur de navigation.

Vive! Nous l'avons résolu. Bien que la réponse ne soit qu'une ligne de code, il est crucial de créer des éléments vraiment flexibles.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!