Esempio di flex-base: contenuto

Question

Ho notato nello flexbox specification che flex-basis può essere impostato su content.

Sto cercando di usarlo nell'html. Ma non funziona in chrome.

Qualcuno può mostrarmi un esempio per flex-basis: content?

Grazie.

Answer 1

Si noti che il valore content non è ancora supportato dalla maggior parte dei browser principali.

Ecco un screenshot from MDN:

Per una spiegazione su ciò che content fa, MDN è anche utile:

content

Indica dimensionamento automatico, sulla base del contenuto dell'articolo flessibile.

Nota: si noti che questo valore non era presente nella versione iniziale di Layout casella flessibile, pertanto alcune implementazioni meno recenti non lo supportano . L'effetto equivalente può essere ottenuto utilizzando auto insieme con una dimensione principale (larghezza o altezza) di auto.

Nota: Breve storia

• Originariamente, flex-basis: auto significava "guardare la mia larghezza o l'altezza proprietà".
• Quindi, flex-basis: auto è stato modificato per indicare il dimensionamento automatico, e "main-size" è stato introdotto come parola chiave "guarda la mia larghezza o altezza proprietà".
• Quindi, tale modifica è stata ripristinata, quindi auto significa ancora una volta "guarda alla proprietà larghezza o altezza"; e una nuova parola chiave content è stata introdotta per attivare il dimensionamento automatico.

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