flex-basis 的例子：內容

Question

我在flexbox 規范中注意到flex-basis可以設置為content 。

我正在嘗試在 html 中使用它。 但它不適用於 chrome。

有人可以給我看一個flex-basis: content的例子嗎？

謝謝你。

Answer 1

請注意，大多數主要瀏覽器尚不支持content值。

這是MDN的截圖：

有關content作用的解釋，MDN 也很有幫助：

content

表示根據彈性項目的內容自動調整大小。

注意：請注意，Flexible Box Layout 的初始版本中不存在此值，因此一些較舊的實現將不支持它。 可以通過將auto與主要大小（寬度或高度）的auto一起使用來獲得等效效果。

注：簡史

• 最初， flex-basis: auto意思是“看看我的寬度或高度屬性”。
• 然后， flex-basis: auto被更改為表示自動調整大小，並且“main-size”被引入為“查看我的寬度或高度屬性”關鍵字。
• 然后，該更改被還原，因此auto再次表示“查看我的寬度或高度屬性”； 並且引入了一個新的content關鍵字來觸發自動調整大小。

_{來源： https : //developer.mozilla.org/en-US/docs/Web/CSS/flex-basis#Values}