web-dev-qa-db-fra.com

Créez des éléments enfants rétractables au conteneur à mesure qu'ils s'enroulent

J'essaie de comprendre comment fonctionne la flexbox (censée fonctionner?…) Dans les cas suivants:

.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>

JSFiddle ici

Le problème est que, quand il y a assez d'espace pour y ranger des éléments, je reçois un joli enfant bien ajusté, avec un espacement égal. (premier bloc de la division supérieure)

Cependant, lorsqu'il n'y a pas assez d'espace et que le texte à l'intérieur des enfants commence à être enroulé, tout va dans une direction étrange: les enfants ne sont plus en forme, et même après avoir enveloppé, il y a suffisamment d'espace autour des enfants flexibles, car ils ne sont plus en forme. , l'espace autour n'a pas vraiment la chance de travailler aussi (deuxième bloc div)

Cependant, si j'ajoute des sauts de ligne manuels aux endroits où se produisent les sauts de ligne automatiques, tout est présenté comme il se doit "devrait"… (en bas, troisième bloc)

Ce que j'aimerais, c’est que les enfants soient toujours bien ajustés dans leurs boîtes (bordures noires), et quel que soit l’espace restant, ils soient répartis également entre eux, sans que je n’aie à ajouter de sauts de ligne manuels (ce qui n’est pas une option dans mon cas. )

Est-ce possible du tout?… 

htmlcsscss3flexbox
14
Mikhail Kornienko

En CSS, le conteneur parent ne sait pas quand ses enfants sont renvoyés. Par conséquent, il continue d'adapter sa taille sans se soucier de ce qui se passe à l'intérieur.

En d'autres termes, le navigateur rend le conteneur sur la cascade initiale. Le document n'est pas rediffusé lorsqu'un enfant termine sa lecture.

C'est pourquoi le conteneur ne rétrécit pas la présentation plus étroite. Il continue comme si rien n’avait été enveloppé, comme en témoigne l’espace réservé à droite.

La longueur maximale de l'espace blanc horizontal est la longueur du ou des éléments que le conteneur s'attendait à trouver. 

Dans la démo suivante, vous pouvez voir les espaces qui vont et viennent à mesure que la fenêtre se redimensionne horizontalement: DEMO

Vous aurez besoin d’une solution JavaScript (voir ici et ici ) ... ou de requêtes multimédia CSS (voir ici ).

text-align: right sur le conteneur peut être utile dans certains cas.

15
Michael_B

Regardez bien mon Fiddle dans lequel j'ai changé:

  • .holderwidth à max-width (dans les classes .v)
  • modifié.holderà wrap et space-around ses enfants
  • a ajouté 2 autres.vclasses pour plus de clarté
  • enlevé le <br>'s
  • et, surtout , a ajouté flex: 0 0 à.child

Il est presque toujours nécessaire de définir max-width pour Flexbox, ce qui est plus flexible que width. En fonction de la manière dont le .children doit se comporter, modifiez les flex-grow et flex-shrink dans flex: 0 0 pour répondre à vos besoins. (le résultat de flex: 1 0 a l'air sympa aussi)

... pas de Javascript nécessaire ...

UPDATELe Référence Codrops Flexbox m'a vraiment beaucoup aidé à comprendre FBL ...

3
Rene van der Lende

La raison pour laquelle vos blocs se comportent de la sorte est due au rendu CSS.

Dans le premier cas, les navigateurs ne savent pas quand le bloc devient trop petit pour son contenu. Donc, il continue à s’étirer jusqu’à atteindre le maximum puis rend le texte.

Dans votre dernier cas, vous indiquez au navigateur où casser, de sorte qu'il sache que l'élément ne doit pas s'élargir.

La seule façon de résoudre ce problème consiste à définir vous-même les pauses.

1
Wart Claes

Si vous recherchez une solution CSS uniquement, vous pouvez utiliser quelque chose comme width: 100px; pour définir la largeur minimale de l'enfant et flex: auto; pour qu'il s'agrandisse. 

Exemple: https://jsfiddle.net/ncvp7gzs/1

(Notez que ceci n'est testé que sur Chrome)

0
Mark Chapel