Comment empêcher les éléments Flexbox de s'étirer pour remplir l'espace disponible ?-tutoriel CSS-php.cn

Comment empêcher les éléments Flexbox de s'étirer pour remplir l'espace disponible ?

Susan Sarandon

Libérer： 2024-11-29 15:28:10

original

760 Les gens l'ont consulté

How to Prevent Flexbox Items from Stretching to Fill Available Space?

Élargissement des éléments Flexbox : solution et considérations

Dans une disposition Flexbox, il est possible que les éléments flexibles s'étirent pour remplir l'espace disponible, même lorsque leur propre contenu est très important. plus petit. Cela peut poser un problème dans certaines situations.

Cause première de l'étirement de l'article

Dans l'exemple fourni, la valeur l'élément s'étend jusqu'à la hauteur de son conteneur flexible,

, à cause du CSS suivant :

div {
  display: flex;
  height: 200px;
}

Copier après la connexion

Cela définit l'élément

en tant que conteneur flexible et définit sa hauteur à 200 px. Depuis le L'élément est le seul élément flexible, il est automatiquement étiré pour remplir tout l'espace disponible.

Empêcher l'étirement d'un élément

Il existe deux manières principales d'empêcher les éléments flexibles de s'étirer :

Définissez la propriété align-items : Définir align-items sur flex-start alignera tous les éléments flexibles sur le haut du conteneur, quelle que soit la taille de leur contenu. Cela garantit qu'aucun élément ne s'étirera verticalement.

div {
  display: flex;
  height: 200px;
  align-items: flex-start;
}

Copier après la connexion

Utilisez la propriété flex : La propriété flex peut être utilisée pour contrôler la flexibilité d'éléments flexibles individuels. Par défaut, tous les éléments flexibles ont une valeur flex de 1, ce qui signifie qu'ils s'étireront pour remplir tout espace disponible. Pour empêcher un élément de s'étirer, définissez sa valeur de flexion sur un nombre inférieur, tel que 0.

span {
  flex: 0;
}

Copier après la connexion

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!

Article précédent：Comment garder les bords nets lors du flou d'une image avec le filtre CSS3 ? Article suivant：Pourquoi mes colonnes de blocs en ligne de 50 % de largeur passent-elles à la ligne suivante ?

Déclaration de ce site Web

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Derniers articles par auteur

Derniers numéros

function_exists() ne peut pas déterminer la fonction personnalisée Function test () {return true;} if (function_exists ('test')) {echo "le test est une ...

Depuis 2024-04-29 11:01:01

2857

Comment afficher la version mobile de Google Chrome Bonjour professeur, comment puis-je changer Google Chrome en version mobile ?

Depuis 2024-04-23 00:22:19

2994

La fenêtre enfant exploite la fenêtre parent, mais la sortie ne répond pas. Les deux premières phrases sont exécutables, mais la dernière ne peut pas être implémentée...

Depuis 2024-04-19 15:37:47

2490

Il n'y a aucune sortie dans la fenêtre parent document.onclick = function(){ window.opener.document.write('Je suis la sortie de la fenêt...