recherche

Maison  >  Questions et réponses  >  le corps du texte

Pourquoi les éléments flexibles ne peuvent-ils pas être réduits en dessous de la taille du contenu ?

J'ai 4 colonnes Flexbox et tout fonctionne bien, mais lorsque j'ajoute du texte à la colonne et que je la règle sur une grande taille de police, la colonne est plus large qu'elle ne devrait l'être en raison de la propriété Flex.

J'ai essayé d'utiliser word-break:break-word et cela m'a aidé, mais lorsque je redimensionne la colonne à une très petite largeur, les lettres du texte sont divisées en plusieurs lignes (une lettre par ligne), et la largeur de la colonne ne devient jamais inférieure à une. La taille des lettres.

Regardez cette vidéo (Au début, la première colonne est la plus petite, mais lorsque je redimensionne la fenêtre, c'est la colonne la plus large. Je veux juste toujours respecter les paramètres Flex ; taille Flex 1:3:4:4)

Je sais, réduire la taille de la police et le remplissage des colonnes aiderait... mais existe-t-il une autre solution ?

Je ne peux pas utiliser overflow-x:hidden.

JSFiddle


.container {
  display: flex;
  width: 100%
}
.col {
  min-height: 200px;
  padding: 30px;
  word-break: break-word
}
.col1 {
  flex: 1;
  background: orange;
  font-size: 80px
}
.col2 {
  flex: 3;
  background: yellow
}
.col3 {
  flex: 4;
  background: skyblue
}
.col4 {
  flex: 4;
  background: red
}
<div class="container">
  <div class="col col1">Lorem ipsum dolor</div>
  <div class="col col2">Lorem ipsum dolor</div>
  <div class="col col3">Lorem ipsum dolor</div>
  <div class="col col4">Lorem ipsum dolor</div>
</div>


P粉038161873P粉038161873405 Il y a quelques jours732

répondre à tous(2)je répondrai

  • P粉884667022

    P粉8846670222023-10-16 12:25:29

    Je trouve que Flex et Grid me dérangent depuis des années, alors voici ce que je suggère : 

    * { min-width: 0; min-height: 0; }

    Ensuite, si vous avez besoin de ce comportement, utilisez simplement min-width: auto 或 min-height: auto .

    En fait, vous pouvez également ajouter des tailles de boîtes pour rendre toutes les mises en page plus logiques : 

    * { box-sizing: border-box; min-width: 0; min-height: 0; }

    Est-ce que quelqu'un sait s'il y a des conséquences étranges ? Je n'ai eu aucun problème depuis quelques années en utilisant un mélange des méthodes ci-dessus. En fait, je ne peux penser à aucun cas où je voudrais mettre en page le contenu vers l'extérieur dans le Flex/Grid, plutôt que de le mettre en page depuis le Flex/Grid vers l'intérieur dans le contenu --- bien sûr, s'ils existent, ils sont rares . Cela ressemble donc à un mauvais défaut. Mais peut-être qu'il me manque quelque chose ?

    répondre
    0
  • P粉557957970

    P粉5579579702023-10-16 11:35:45

    Taille minimale automatique pour les projets Flex

    Vous rencontrez les paramètres par défaut de Flexbox.

    Les éléments Flex ne peuvent pas être plus petits que la taille de leur contenu le long de l'axe principal.

    La valeur par défaut est...

    • 最小宽度：自动
    • 最小高度：自动

    ... éléments flexibles pour les directions de ligne et de colonne respectivement.

    Vous pouvez remplacer ces valeurs par défaut en définissant l'élément flexible sur :

    • 最小宽度：0
    • 最小高度：0
    • 溢出：隐藏（或任何其他值，可见Sauf)

    Spécifications Flexbox

    À propos de autovaleur...

    En d'autres termes :

      Applicable lorsque
    • min-width: auto 和 min-height: auto 默认值仅在overflow 可见.
    • Sioverflow值不可见，则min-size属性的值为0.
    • Par conséquent, overflow: hide 可以替代 min-width: 0 和 min-height: 0.

    Aussi...

    Vous avez appliqué min-width : 0 mais le projet ne rétrécit toujours pas ?

    Conteneurs flexibles imbriqués

    Si vous travaillez avec des projets Flex sur plusieurs niveaux de la structure HTML, vous souhaiterez peut-être remplacer la valeur par défaut min-width: auto / min-height: auto sur les projets de niveau supérieur.

    Fondamentalement, un projet Flex de niveau supérieur avec min-width: auto 的更高级别的 Flex 项目可以防止使用 min-width: 0 empêche les projets imbriqués ci-dessous avec

    min-width : 0     de rétrécir.

    Exemple :
    • Les articles flexibles ne rétrécissent pas plus petits que leur contenu
    • Faites en sorte que l'enfant s'adapte au parent
    • Les propriétés CSS vides peuvent causer des problèmes avec Flex

    Instructions de rendu du navigateur

    Démo modifiée

    🎜 
    .container {
  display: flex;
}

.col {
  min-height: 200px;
  padding: 30px;
  word-break: break-word
}

.col1 {
  flex: 1;
  background: orange;
  font-size: 80px;
  min-width: 0;   /* NEW */
}

.col2 {
  flex: 3;
  background: yellow
}

.col3 {
  flex: 4;
  background: skyblue
}

.col4 {
  flex: 4;
  background: red
}
    <div class="container">
  <div class="col col1">Lorem ipsum dolor</div>
  <div class="col col2">Lorem ipsum dolor</div>
  <div class="col col3">Lorem ipsum dolor</div>
  <div class="col col4">Lorem ipsum dolor</div>
</div>

    répondre
    0
  • Annulerrépondre