# max-content
當文字在inline-block時，會依據block大小來調整文字排版，使用max-content時就會強制文字變成單行走到底

# min-content
會依據容器內最大的字或圖片去編排，

`先來個概念，假設容器w:100px, h:100px，如果這裡面有文字，文字會依照容器大小字適應，如果今天裡面再加一塊圖w,h都超過容器，圖片會超出容器`

### 對容器使用min-content

# fit-content
其意思是為==以內容的寬度來決定容器的寬度==

假設在容器裡面有10個水平並排內容，每個內容寬度是1px，這樣容器就會以內容來定義自己的寬度，也就是10px

可以實現元素收縮效果，同時保持原本的block水平狀態，於是，就可以直接使用margin:auto實現元素向內自適應同時的居中效果

## 規範寫什麼

> *'fit-content'*
Essentially fit-content(stretch) i.e. min(max-content, max(min-content, stretch)).
[w3.org](https://drafts.csswg.org/css-sizing-4/#sizing-values)

亦即：fit-content等同於使用fit-content()這個function，而參數為stretch。

因此來看看fit-content()是什麼？

>*'fit-content(\<length-percentage>)'*
Use the fit-content formula with the available space replaced by the specified argument, i.e. min(max-content, max(min-content, \<length-percentage>)), where the \<length-percentage> argument is resolved exactly as for \<length-percentage> values standing alone.
[w3.org](https://www.w3.org/TR/css-sizing-3/#sizing-values)

也就是如果設定fit-content(300px)就等同於min(max-content, max(min-content, 300px))

所以這句：
min(max-content, max(min-content, \<length-percentage>))
是什麼意思呢？

由外而內來看，min(a, b)是取最小值，因此就是從max-content和max(min-content, \<length-percentage>)這兩個之間取最小值。再來，max(a, b)是取最大值，因此就是從min-content和\<length-percentage>這兩個之間取最大值。

在這邊取最大最小是要幹麻？

先看個MDN的例子：

將這三個columns分別設定為以下：

grid-template-columns: fit-content(300px) fit-content(300px) 1fr;


第一個column的內容寬度為188px，最長的單字寬度為47px，所以max(min-content, \<length-percentage>)=max(47px, 300px)=300px，接著代入min(max-content, max(min-content, \<length-percentage>)=min(188px,300px)=188px，所以第一個column的最終寬度為188px。

第二個column的內容寬度為588px(會佔滿整個父容器的寬)，最長的單字寬度為66px，所以max(min-content, \<length-percentage>)=max(66px, 300px)=300px，接著代入min(max-content, max(min-content, \<length-percentage>)=min(588px,300px)=300px，所以第二個column的最終寬度為300px。

所以可以理解成，若內容寬度小於設定的數值，就會依照內容寬度作為容器寬度，反之若內容寬度大於設定的數值，就會依照設定的數值作為容器寬度。

回頭看fit-content(stretch)，就會是比較內容寬度和stretch哪一個數值比較小，以作為容器寬度。

> [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/fit-content)怎麼說？
> The fit-content behaves as fit-content(stretch). In practice this means that the box will use the available space, but never more than max-content.
> 會使用到可用的空間，但永遠不會大於內容寬度。

stretch是什麼？
> *'stretch'*
Applies stretch-fit sizing, attempting to match the size of the box’s margin box to the size of its containing block. See § 6.1 Stretch-fit Sizing: filling the containing block.
[w3.org](https://www.w3.org/TR/css-sizing-3/#sizing-values)

stretch-fit sizing又是什麼？
> *'stretch-fit sizing'*
Stretch-fit sizing tries to set the box’s used size to the length necessary to make its outer size as close to filling the containing block as possible while still respecting the constraints imposed by min-height/min-width/max-height/max-width.
[w3.org](https://drafts.csswg.org/css-sizing-4/#stretch-fit-sizing)

也就是說，stretch會將這個box的大小(包含margin)設定為能夠盡量填滿其父容器。

所以如果在寬度設定fit-content(stretch)的意思就是去比較內容寬度和父容器寬度哪一個數值比較小，以作為容器寬度。例如下圖可以看到，若內容寬度小於父容器寬，則這個box的寬度會是內容寬度，若內容寬度大於父容器寬，則這個box的寬度會是父容器寬。

/* css */
.container { width: 20em; }
.item { width: fit-content; }