Comment les valeurs min-content et max-content calculées en CSS?
Et que signifie la dimension intrinsèque?
Réponse
Trop de publicités?
Remarque: "largeur" dans ce texte se réfère à la "logique de la largeur", pas de CSS, width; les valeurs sont également valables pour les CSS, height, si la langue de direction est verticale (comme l'est de l'asie langues) ou dans flexbox ou de la grille. min-content et max-content sont des valeurs valides pour width, height, min-width, min-height, max-width, max-height et même plus de propriétés (comme flex-basis).
Quelles sont les intrinsèque dimensions de la boîte?
CSS dimensionnement de niveau 3 a introduit le concept de intrinsèques dimensions - à l'opposé de extrinsèque. Un extrinsèques dimension de la boîte est calculé sur le parent de la boîte de boîte de. Par exemple width: 80% a dit un extrinsèques dimension que l' width de l'objet dépend de l' width de sa boîte contenant.
Contrairement à que la, width: min-content est dit intrinsèque que la largeur de la boîte est calculée sur la dimension des contenus que la boîte contient elle-même.
Intrinsèque dimensions sont les propriétés de la boîte elle-même, extrinsèque dimensions ne sont disponibles que si la boîte est placée dans le document et dans un contexte qui permet à ces valeurs calculées. Par exemple, dans les CSS-flux (le classique CSS de mise en page mode), comme vous le savez probablement, height: 20% a d'effet que si height est défini dans l'élément parent (c'est à dire que c'est héréditaire); c'est un cas de extrinsèques dimension qui n'est pas calculable (quand extrinsèque de valeur n'est pas disponible, le CSS de base à sa intrinsèque équivalent). Au lieu de cela height: min-content est toujours calculable, comme il est intrinsèque à la boîte elle-même, et c'est toujours la même, indépendamment de la boîte de placement (ou la zone de son absence) dans le document.
La définition de l' min-content et max-content a changé de nombreuses fois au fil des ans, mais le résultat est toujours resté le même, et il est assez simple à comprendre. Ils ont été initialement demandé par la communauté comme mots clés pour width, dont la valeur calculée correspondent à la largeur de la boîte quand la boîte est - floating. Et en effet, la définition de ces deux propriétés a été à l'origine basé sur le comportement de l' float; maintenant, ils sont plus génériquement défini comme suit:
min-content
https://www.w3.org/TR/css-sizing-3/#min-content
La plus petite taille d'une boîte, on pourrait prendre cela ne conduit pas à débordement qui pourrait être évité en choisissant une taille plus grande.
En d'autres termes, la plus petite largeur d'une zone où la zone de contenu n'est pas de débordement de la boîte elle-même.
Une bonne façon de visualiser c'est, en fait, float.
/* the computed width of #red in this example
equals to specifying #red { width: min-content } */
#blue { width: 0px; }
#blue > #red { float: left; }
GIF (source: http://jsfiddle.net/6srop4zu/)
Dans le GIF ci-dessus, la zone rouge du min-contenu de la largeur est égale à la boîte rouge de la largeur à la fois le bleu de la boîte de largeur est 0px (234px dans le GIF, peut être différente dans le jsfiddle).
Comme vous pouvez le voir, si la zone rouge a été de plus en plus petits, le mot supercalifragilisticexpialidocious serait de débordement de la zone rouge, donc dans ce cas, l' min-content est égale à la largeur de ce mot en particulier, car il est celui qui prend le plus de place à l'horizontale.
max-content
https://www.w3.org/TR/css-sizing-3/#max-content
Une boîte de dimensions "idéales" dans un axe lorsqu'il est administré infini de l'espace disponible. Habituellement, c'est la plus petite taille de la boîte, on pourrait prendre dans l'axe alors que encore ajusté autour de son contenu, c'est à dire en minimisant espace vide, tout en évitant tout débordement.
/* the computed width of #red in this example
equals to specifying #red { width: max-content } */
#blue { width: 99999999999999999px; } /* ~infinite */
#blue > #red { float: left; }
GIF (source: http://jsfiddle.net/nktsrzvg/)
Dans le GIF ci-dessus, la zone rouge du max-contenu de la largeur est égale à la boîte rouge de la largeur de la boîte bleue à la largeur de l'est à l'infini (386px dans le GIF, peut être différente dans le jsfiddle).
Ici, la boîte rouge prend pleinement parti de l'espace disponible sur l'axe des x dans la boîte bleue, mais sans le perdre. Les contenus sont autorisés à se développer sur l'axe, sans restrictions, et la zone rouge pour les enveloppe et au moment de leur expansion maximale.
Qu'en fit-content, stretch et les autres? Ces propriétés sont actuellement réexaminés et, comme tels, ils ne sont pas stables (date: juillet 2018). Ils seront ajoutés ici quand ils obtiennent un peu plus mature (j'espère bientôt).
