Proprietà CSS flex
La proprietà CSS flex definisce come gli elementi devono crescere o ridursi nel contenitore. Scopri alcuni esempi.
La proprietà flex definisce i componenti di una lunghezza flessibile. È una scorciatoia per le seguenti proprietà:
Tutti e tre i componenti sono opzionali nella dichiarazione abbreviata. Quando omessi, flex-grow assume il valore predefinito 1, flex-shrink assume il valore predefinito 1 e flex-basis assume il valore predefinito auto. Si noti che il fattore flex-shrink viene moltiplicato per il valore flex-basis quando si distribuisce lo spazio negativo.
La proprietà flex è una delle proprietà CSS3.
Questa proprietà fa parte del modulo Flexible Box Layout. Se non ci sono elementi flessibili, la proprietà flex non avrà alcun effetto.
La parola chiave auto equivale a 1 1 auto. Dimensiona l'elemento in base alle proprietà width/height. Se la proprietà della dimensione principale dell'elemento è impostata su auto, il sizing dell'elemento flex si baserà sul suo contenuto.
La parola chiave initial equivale a 1 0 auto. Dimensiona l'elemento in base alle sue proprietà width/height (o al suo contenuto se non impostate). Ciò rende l'elemento flex non flessibile quando rimane spazio libero, e non si ridurrà quando lo spazio non è sufficiente. Le tecniche di allineamento o i margini automatici vengono utilizzati per allineare gli elementi flex lungo l'asse principale.
La parola chiave none equivale a 0 0 auto. Dimensiona l'elemento in base alle proprietà width e height. È completamente non flessibile.
Nota: i valori iniziali di flex-grow e flex-shrink differiscono dai loro valori predefiniti quando non sono inclusi nella dichiarazione abbreviata flex, in modo da poter gestire meglio i casi più comuni.
| Valore iniziale | 0 1 auto |
|---|---|
| Si applica a | Elementi flex, inclusi gli pseudo-elementi in-flow. |
| Ereditato | No. |
| Animabile | Sì. |
| Versione | CSS3 |
| Sintassi DOM | Object.style.flex = "1"; |
Sintassi
Sintassi della proprietà CSS flex
flex: flex-grow | flex-shrink | flex-basis | auto | initial | inherit;I valori possono essere specificati in qualsiasi ordine. Quando si usa flex-basis, è possibile applicare anche i vincoli min-width o min-height per impedire che l'elemento si riduca al di sotto di una dimensione specificata.
Esempio della proprietà flex:
Esempio della proprietà CSS flex
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.box {
width: 350px;
height: 200px;
padding-left: 0;
list-style-type: none;
border: 1px dashed black;
display: flex;
}
.box div {
flex: 1;
}
.green {
background-color: #8ebf42;
}
.blue {
background-color: #1c87c9;
}
.gray {
background-color: #666666;
}
</style>
</head>
<body>
<h2>Flex property example</h2>
<div class="box">
<div class="green">GREEN</div>
<div class="blue">BLUE</div>
<div class="gray">GRAY</div>
</div>
</body>
</html>Risultato
Esempio della proprietà flex con il valore "flex-grow":
Esempio della proprietà CSS flex con il valore flex-grow
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.box {
width: 320px;
height: 120px;
border: 1px solid #666;
display: flex;
}
.box div:nth-of-type(1) {
flex-grow: 1;
}
.box div:nth-of-type(2) {
flex-grow: 4;
}
.box div:nth-of-type(3) {
flex-grow: 1;
}
.box div:nth-of-type(4) {
flex-grow: 1;
}
.box div:nth-of-type(5) {
flex-grow: 1;
}
</style>
</head>
<body>
<h2>Flex-grow example</h2>
<div class="box">
<div style="background-color: #eee;"></div>
<div style="background-color: #1c87c9;"></div>
<div style="background-color: #8ebf42;"></div>
<div style="background-color: #ccc;"></div>
<div style="background-color: #666;"></div>
</div>
</body>
</html>Esempio della proprietà flex con il valore "flex-shrink":
Esempio della proprietà CSS flex con il valore flex-shrink
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.box {
width: 320px;
height: 120px;
border: 1px solid #666;
display: flex;
}
.box div {
flex-grow: 1;
flex-shrink: 2;
flex-basis: 100px;
}
.box div:nth-of-type(2) {
flex-shrink: 5;
}
</style>
</head>
<body>
<h2>Flex-shrink example</h2>
<div class="box">
<div style="background-color: #eeeeee;"></div>
<div style="background-color: #1c87c9;"></div>
<div style="background-color: #8ebf42;"></div>
<div style="background-color: #cccccc;"></div>
<div style="background-color: #666666;"></div>
</div>
</body>
</html>Pattern abbreviati comuni
Alcuni valori di flex ricorrono così spesso da meritare di essere memorizzati:
flex: 1(=1 1 0) — l'elemento cresce e si riduce liberamente, partendo da una dimensione base di0. Applicalo a ogni figlio per suddividere il contenitore in colonne di larghezza uguale, indipendentemente dal contenuto.flex: auto(=1 1 auto) — cresce e si riduce, ma la dimensione di partenza è il contenuto/widthdell'elemento. Gli elementi si dividono lo spazio rimanente mantenendo le loro proporzioni naturali.flex: none(=0 0 auto) — un elemento fisso e non flessibile. Usalo per una barra laterale o un pulsante che deve mantenere le sue dimensioni mentre gli elementi adiacenti sono flessibili.flex: 0 0 200px— fisso a200px: non cresce né si riduce, utile per una colonna a larghezza fissa.
Un errore comune: flex: 1 usa un flex-basis di 0, quindi la larghezza intrinseca del contenuto viene ignorata e le colonne diventano veramente uguali. Se invece vuoi colonne dimensionate in base al loro contenuto ma che possano comunque espandersi, utilizza flex: auto.
Valori
| Valore | Descrizione |
|---|---|
| flex-grow | Specifica di quanto l'elemento crescerà rispetto agli altri elementi flessibili dello stesso contenitore. |
| flex-shrink | Specifica di quanto l'elemento si ridurrà rispetto agli altri elementi flessibili dello stesso contenitore. |
| flex-basis | Specifica la lunghezza dell'elemento tramite "auto", "inherit" o un numero seguito da "%", "px", "em", ecc. |
| auto | Equivale a 1 1 auto. |
| initial | Equivale a 1 0 auto. |
| none | Equivale a 0 0 auto. |
| inherit | Eredita questa proprietà dal suo elemento padre. |