CSS - Proprietà max-inline-size: Una Guida per Principianti

Ciao a tutti, futuri maghi del CSS! Oggi esploreremo l'eccitante mondo della proprietà max-inline-size. Non preoccupatevi se siete nuovi a questo argomento; sarò il vostro guida amichevole in questa avventura CSS. Allora, prendete una tazza di caffè (o tè, se è più il vostro şey), e iniziamo!

Cos'è max-inline-size?

Prima di immergerci nei dettagli, capiremo di cosa si occupa max-inline-size. Immagina di voler adattare una parola molto lunga in una scatola piccola. Ecco, max-inline-size ci aiuta con questo in CSS. Stabilisce la dimensione massima di un elemento nella direzione inline.

"Ma attendi," potreste chiedere, "cos'è la direzione inline?" Ottima domanda! In italiano e in molte altre lingue, la direzione inline è orizzontale - da sinistra a destra. Tuttavia, in alcune lingue come l'arabo o l'ebraico, è da destra a sinistra. E nei modi di scrittura verticale, può persino essere da sopra a sotto!

Valori Possibili

Ora, esaminiamo i diversi valori che possiamo utilizzare con max-inline-size. Ecco una tabella utile per voi:

Valore	Descrizione
<lunghezza>	Una lunghezza fissa come 300px o 20em
<percentuale>	Una percentuale della dimensione del blocco contenitore
nessuno	Nessun limite sulla dimensione (questo è il valore predefinito)
max-content	La dimensione preferita intrinseca
min-content	La dimensione minima intrinseca
fit-content	Utilizza lo spazio disponibile, ma mai meno di min-content e mai più di max-content

Non preoccupatevi se alcuni di questi sembrano confusi ora. Esploreremo ognuno con esempi!

Applica a

La proprietà max-inline-size si applica a tutti gli elementi tranne:

• Elementi inline non sostituiti
• Righe di tabella
• Gruppi di righe

Sintassi

La sintassi di base per max-inline-size è abbastanza semplice:

max-inline-size: valore;

Facile, vero? Ora, immergiamoci in alcuni esempi specifici!

CSS max-inline-size - Valore

Iniziamo con un esempio semplice utilizzando una lunghezza fissa:

.box {
max-inline-size: 300px;
background-color: lightblue;
padding: 10px;
}

<div class="box">
Questa è una casella con max-inline-size impostato su 300px. Il contenuto si piegherà se supera questa larghezza.
</div>

In questo esempio, abbiamo impostato max-inline-size a 300 pixel. Questo significa che indipendentemente da quanto contenuto mettiamo all'interno della .box, non si estenderà mai oltre 300px nella direzione inline (che è orizzontale in questo caso). Se il contenuto è troppo lungo, si piegherà alla riga successiva.

CSS max-inline-size - Valore

Ora, proviamo a utilizzare un valore percentuale:

.container {
width: 500px;
border: 2px solid black;
}

.box {
max-inline-size: 50%;
background-color: lightgreen;
padding: 10px;
}

<div class="container">
<div class="box">
Questa casella ha max-inline-size impostato al 50% della larghezza del suo contenitore.
</div>
</div>

In questo caso, la .box avrà una dimensione massima inline del 50% della larghezza del suo contenitore. Quindi, se il contenitore è largo 500px, la casella non supererà mai 250px in larghezza.

CSS max-inline-size - Valore

Il valore max-content è particolarmente interessante. Imposta la dimensione massima inline alla dimensione preferita del contenuto. Vediamo come funziona:

.box {
max-inline-size: max-content;
background-color: lightyellow;
padding: 10px;
}

<div class="box">
Questa casella si espande per adattare il suo contenuto, ma non si piega se non è costretta.
</div>

Con max-content, la casella si espande per adattare tutto il suo contenuto su una riga, piegandosi solo se è costretta (come se colpisce il bordo della viewport).

CSS max-inline-size - Con Testo Verticale

Ora, qualcosa di diverso! Vediamo come max-inline-size funziona con il testo verticale:

.vertical-box {
writing-mode: vertical-rl;
max-inline-size: 100px;
background-color: lightpink;
padding: 10px;
}

<div class="vertical-box">
Questo testo è verticale, e max-inline-size limita la sua altezza!
</div>

In questo esempio, abbiamo utilizzato writing-mode: vertical-rl per rendere il testo verticale e da destra a sinistra. Ora, max-inline-size sta effettivamente limitando l'altezza della casella, perché nel modo di scrittura verticale, la direzione inline è verticale!

Conclusione

Eccoci, gente! Abbiamo esplorato la proprietà max-inline-size dalla A alla Z (o dovremmo dire, dall'inizio alla fine della direzione inline?). Ricorda, CSS è tutto sull'esperimento. Non abbiate paura di giocare con queste proprietà e vedere cosa succede. È così che abbiamo tutti imparato!

Prima di lasciarvi, ecco una piccola battuta per ricordare max-inline-size: Perché la proprietà CSS è andata in palestra? Per lavorare sul suo max-inline-size, ovviamente!

Buon codice, e che i vostri layout siano sempre flessibili e il vostro contenuto sempre ben adattato!

Credits: Image by storyset