web-dev-qa-db-fra.com

Quels sont exactement les ensembles de propriétés flex-base?

Existe-t-il une différence entre définir max-width ou width sur un élément flexible au lieu de flex-basis?

Est-ce le "point de rupture" pour les propriétés flex-grow/shrink?

Et quand je règle flex-wrap: wrap, comment le navigateur décide-t-il à quel moment déplacer l'élément vers la nouvelle ligne? Est-ce en fonction de leur largeur ou de leur "base flexible"?

Exemple: http://jsfiddle.net/wP5UP/ Les deux dernières cases ont le même flex-basis: 200px, mais seulement l'un d'eux baisse lorsque la fenêtre se situe entre 300 et 400 pixels. Pourquoi?

csscss3flexbox
41
ilyo

flex-basis vous permet de spécifier la taille initiale/de départ de l'élément, avant que toute autre chose soit calculée. Il peut s'agir d'un pourcentage ou d'une valeur absolue.

Cependant, c’est pas le point de rupture des propriétés de flexion/croissance. Le navigateur détermine le moment où l’élément doit être emballé en fonction de la taille initiale des éléments qui dépasse la largeur de l’axe transversal (dans le sens classique, c’est la largeur).

En fonction de votre violon, la dernière raison pour se déplacer dans la fenêtre tient au fait que la largeur du parent a été entièrement occupée par les frères et sœurs précédents - et lorsque vous autorisez le contenu à être renvoyé au contenu, les éléments qui ne tiennent pas dans la première ligne deviennent poussé à la rangée suivante. Puisque flex-grow est une valeur non nulle, il va simplement s'étirer pour remplir tous les espaces laissés dans la deuxième ligne.

Voir démo violon (modifié de la vôtre) .

Si vous regardez le violon, j'ai modifié pour que le dernier article ait une nouvelle déclaration de taille:

.size3 {
  flex: 0 1 300px;
}

Vous vous rendrez compte que l'élément mesure 300px à travers comme prévu. Toutefois, lorsque vous ajustez la propriété flex-grow de telle sorte que sa valeur dépasse 0 ( voir exemple ), elle s'étire pour remplir la ligne, ce qui correspond au comportement attendu. Étant donné que, dans son nouveau contexte de ligne}, il n'a pas de frères et soeurs avec lesquels comparer, un entier compris entre 1 et l'infini n'influencera pas sa taille.

Par conséquent, flex-grow peut être vu comme ceci:

  • 0: (valeur par défaut) ne pas étirer. Dimensionnez en fonction de la largeur du contenu de l'élément ou obéissez flex-basis.
  • 1: Stretch.
  • ≥2 (entier n): Étirer. Sera n fois la taille des autres éléments avec flex-grow: 1 sur la même ligne, par exemple. 
41
Terry

Bon article https://gedd.ski/post/the-difference-between-width-and-flex-basis/

flex-base est: la taille des éléments flexibles avant qu’ils ne soient placés dans un conteneur souple. C'est la taille idéale ou hypothétique des objets. Mais flex-base n'est pas une taille garantie! Dès que le navigateur place le articles dans leur conteneur flexible, les choses changent. Souvent, le flex le conteneur n'aura pas assez d'espace ou aura un espace supplémentaire après tout les valeurs de base des éléments de ses éléments sont additionnées.

1
zloctb