Conteneur rétractable pour s'adapter aux éléments enfants enveloppés

Question

J'essaie de comprendre comment fonctionne flexbox (devrait fonctionner ?...) pour une situation comme celle-ci :

.holder {
  width: 500px;
  background: lightgray;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  flex-wrap: nowrap;
}
.v2 {
  width: 320px;
}
.child {
  display: inline-block;
  border: 1px solid black;
  padding: 30px 0px;
  text-align: center;
}

<div class="holder">
  <div class="child">At a glance</div>
  <div class="child">After coverage ends</div>
  <div class="child">Forms &amp; documents</div>
</div>
<br>
<br>
<div class="holder v2">
  <div class="child">At a glance</div>
  <div class="child">After coverage ends</div>
  <div class="child">Forms &amp; documents</div>
</div>
<br>
<br>
<div class="holder v2">
  <div class="child">At a
    <br>glance</div>
  <div class="child">After coverage
    <br>ends</div>
  <div class="child">Forms &amp;
    <br>documents</div>
</div>

Voici JSFiddle

Le problème est que lorsqu'il y a suffisamment d'espace pour contenir les éléments, j'obtiens un enfant bien serré avec un espacement uniforme entre les enfants. (premier bloc div supérieur)

Cependant, lorsqu'il n'y a pas assez d'espace chez l'enfant et que le texte commence à s'enrouler, tout va dans une direction étrange : les enfants ne sont plus bien ajustés, et même après l'emballage, il y a encore assez d'espace autour de l'enfant flexible parce que ne rentre plus et l'espace environnant n'a pas vraiment de chance de fonctionner (le deuxième bloc div)

Cependant, si j'ajoute des sauts de ligne manuels là où se produisent les sauts de ligne automatiques, tout est disposé comme il "devrait"... (en bas, troisième bloc)

Ce que je veux, c'est que les enfants soient toujours fermement à l'intérieur de leur boîte (bordure noire) et que l'espace restant soit réparti uniformément entre eux sans que j'ajoute des sauts de ligne manuels (ce n'est pas une option) en ce qui me concerne)

Est-ce possible ? ...

Answer 1

Regardez de plus près mon Fiddle modifié :

• .holder width 到 max-width （在 .v catégorie)
• Modifié .holder 以 wrap 和 space-around ses enfants
• Ajout de 2 .v classes
supplémentaires pour plus de clarté
• Supprimé
的
• Et, surtout, ajoutez flex: 0 0 à flex: 0 0 添加到 .child.child

Flexbox doit presque toujours être configuré max-width，这比widthpour être plus flexible. Les résultats semblent bons selon ce dont vous avez besoin .children 的行为方式，修改 flex: 0 0 中的 flex-grow 和 flex-shrink 来满足您的需求。 （flex: 1 0)

...Aucun JavaScript requis...

Codrops Flexbox Reference est très utile pour comprendre la disposition des flexbox.

Answer 2

En CSS, un conteneur parent ne sait pas quand ses conteneurs enfants se terminent. Il continue donc à s’étendre, ignorant ce qui se passe en interne.

En d'autres termes, le navigateur restitue le conteneur sur la cascade initiale. Il ne redistribue pas le document lorsque l'enfant le termine.

C’est pourquoi les conteneurs ne sont pas emballés sous film rétractable pour les configurations plus étroites. Cela continue comme si rien n'était emballé, comme en témoigne l'espace réservé à droite.

La longueur maximale de l'espace blanc horizontal est la longueur des éléments que le conteneur s'attend à être présents.

Dans la démo ci-dessous, vous pouvez voir l'espace blanc aller et venir lorsque la fenêtre est redimensionnée horizontalement : DEMO

Vous avez besoin d'une solution JavaScript (voir ici et ici)... ou de requêtes média CSS (voir ici).

Lors de la gestion de l'habillage du texte, text-align: right sur le conteneur peut être utile dans certains cas.