Jak obliczane są wartości min-contenti max-contentw CSS?

A co oznacza wymiar wewnętrzny?

Uwaga: „szerokość” w tym tekście odnosi się do „szerokości logicznej”, a nie do CSS width; heightOznacza to, że wartości są również ważne dla CSS , jeśli kierunek języka jest pionowy (jak języki wschodnioazjatyckie) lub w flexbox lub grid. min-contenti max-contentsą ważne wartości width, height, min-width, min-height, max-width, max-heighta nawet więcej właściwości (jak flex-basis).

Jakie są wewnętrzne wymiary pudełka?

Poziom 3 rozmiaru CSS wprowadził pojęcie wewnętrznych wymiarów - przeciwieństwo zewnętrznych . Zewnętrzny wymiar pudełka jest obliczana na polu dominującej pudełka. Na przykład width: 80%mówi się, że wymiar zewnętrzny, ponieważ widthpodmiot zależy widthod jego pudełka zawierającego.

W przeciwieństwie do tego, width: min-contentmówi się , że jest to samoistne, ponieważ szerokość pudełka jest obliczana na podstawie wymiaru zawartości, którą zawiera samo pudełko.

Wymiary wewnętrzne są właściwościami samego pudełka, wymiary zewnętrzne są dostępne tylko wtedy, gdy pudełko jest umieszczone w dokumencie iw kontekście, który pozwala na obliczenie tych wartości. Na przykład w CSS-flow (klasyczny tryb układu CSS), jak zapewne wiesz, height: 20%działa tylko wtedy, gdy heightjest zdefiniowany w elemencie nadrzędnym (tj. Jest dziedziczony); jest to przypadek wymiaru zewnętrznego, którego nie można obliczyć (gdy wartość zewnętrzna nie jest dostępna, CSS cofa się do jej wewnętrznego odpowiednika). Zamiast tego height: min-contentjest zawsze obliczalna, ponieważ jest nieodłączną częścią samego pudełka i jest zawsze taka sama, niezależnie od umieszczenia pudełka (lub jego braku) w dokumencie.

Definicja min-contenti max-contentzmieniała się wiele razy na przestrzeni lat, ale wynik zawsze pozostawał taki sam i jest dość prosty do zrozumienia. Zostały pierwotnie zażądane przez społeczność jako słowa kluczowe dla width, których obliczona wartość odpowiadałaby szerokości pudełka, gdy jest ono ustawione float. I rzeczywiście, definicja tych dwóch właściwości była pierwotnie oparta na zachowaniu float; teraz są one bardziej ogólnie zdefiniowane w następujący sposób:

min-content

https://www.w3.org/TR/css-sizing-3/#min-content

Najmniejszy rozmiar pudełka, który nie prowadzi do przepełnienia, którego można by uniknąć, wybierając większy rozmiar.

Innymi słowy, najmniejsza szerokość pudełka, w którym zawartość pudełka nie przepełnia samego pudełka .

W rzeczywistości dobrym sposobem wizualizacji tego jest użycie float.

/* the computed width of #red in this example 
   equals to specifying #red { width: min-content } */
#blue        { width: 0px; }
#blue > #red { float: left; }

(Źródło GIF: http://jsfiddle.net/6srop4zu/ )

W powyższym GIF czerwone pole za min zawartość szerokość jest równa szerokości czerwoną ramkę w chwili szerokość niebieskiego pola jest 0 pikseli (234px w GIF, może być różne w jsfiddle).

Jak widać, gdyby czerwone pole zostało pomniejszone, słowo supercalifragilisticexpialidociousprzepełniłoby czerwone pole, stąd w tym przypadku min-contentszerokość jest równa szerokości tego konkretnego słowa, ponieważ to ono zajmuje najwięcej miejsca w poziomie.

max-content

https://www.w3.org/TR/css-sizing-3/#max-content

„Idealny” rozmiar pudełka w danej osi przy danej nieskończonej dostępnej przestrzeni. Zwykle jest to najmniejszy rozmiar, jaki pudełko może zająć w tej osi, jednocześnie dopasowując się do zawartości, tj. Minimalizując niewypełnioną przestrzeń, unikając przepełnienia.

/* the computed width of #red in this example
   equals to specifying #red { width: max-content } */

#blue        { width: 99999999999999999px; } /* ~infinite */
#blue > #red { float: left; }

(Źródło GIF: http://jsfiddle.net/nktsrzvg/ )

W powyższym GIF czerwone pole w maksymalnej zawartości szerokość jest równa szerokości czerwone pole, gdy szerokość niebieskiego pola jest nieskończona (386px w GIF, może być różne w jsfiddle).

Tutaj czerwone pudełko w pełni wykorzystuje dostępne miejsce na osi x w niebieskim polu, ale bez jego marnowania. Zawartość może rozszerzać się na odpowiedniej osi bez ograniczeń, a czerwone pole otacza je w punkcie maksymalnego rozszerzenia.

Co o fit-content, stretchi inni? Te nieruchomości są obecnie ponownie odwiedzane i jako takie nie są stabilne (data: lipiec 2018). Zostaną dodane tutaj, gdy staną się nieco bardziej dojrzałe (miejmy nadzieję, że wkrótce).

Uważam, że odpowiedź @Wes jest bardzo jasna i dokładna. Ale dla każdego, kto szuka krótkiego:

min-content:

minimalna szerokość, jaką może mieć treść (grupa słów). Oznacza szerokość największego słowa w treści.

przykład:

hi

this 

is

biggest-word-in-the-content

<------- min-content ------>

maksymalna zawartość:

maksymalna szerokość, jaką może mieć treść (grupa słów). Oznacza szerokość treści, gdy wszystkie słowa są ułożone razem w jednej linii.

przykład:

hi this is a content without considering any line breaks.

<---------------------- max-content ------------------->