CSS flex
La proprietà CSS3 flex gestisce lo spazio degli elementi flessibili
La proprietà flex è una scorciatoia per flex-grow, flex-shrink e flex-basis. Permette di controllare in modo semplice come un elemento figlio di un contenitore flex occupa spazio rispetto agli altri. È stata introdotta in CSS3 come parte del modulo Flexbox.
Sintassi
Significato dei valori principali:
-
flex-grow: determina quanto un elemento può crescere rispetto agli altri, in proporzione.
-
flex-shrink: determina quanto un elemento può ridursi, sempre in proporzione agli altri.
-
flex-basis: definisce la dimensione iniziale dell'elemento prima che lo spazio extra venga distribuito.
-
auto: valore predefinito. Equivale a
1 1 auto. -
none: equivale a
0 0 auto. L’elemento non crescerà né si ridurrà. -
initial e inherit: per resettare o ereditare il valore.
Esempio proprietà: flex
Codice Esempio: flex
.flex-container {
display: flex;
width: 100%;
height: 150px;
background-color: #eee;
gap: 10px;
}.flex-item1 {
background-color: #50a14f;
color: white;
padding: 20px;
flex: 1;
}.flex-item2 {
background-color: #ff6347;
color: white;
padding: 20px;
flex: 2;
}.flex-item3 {
background-color: #3a86ff;
color: white;
padding: 20px;
flex: 1;
}
Contenuto Esempio: flex
Esempio di utilizzo di flex
In questo esempio, la proprietà flex viene utilizzata per assegnare differenti comportamenti di crescita agli elementi flessibili all'interno di un contenitore:
CSS e HTML per l’esempio con flex:
<style>
.flex-container {
display: flex;
width: 100%;
height: 150px;
background-color: #eee;
gap: 10px;
}
.flex-item1 {
background-color: #50a14f;
color: white;
padding: 20px;
flex: 1;
}
.flex-item2 {
background-color: #ff6347;
color: white;
padding: 20px;
flex: 2;
}
.flex-item3 {
background-color: #3a86ff;
color: white;
padding: 20px;
flex: 1;
}
</style>
<div class="flex-container">
<div class="flex-item1">Flex 1</div>
<div class="flex-item2">Flex 2</div>
<div class="flex-item3">Flex 1</div>
</div>
Note:
Le indicazioni dei Browser supportati sono superate grazie alla loro costante evoluzione, si consiglia di verificare la compatibilità dei vari browser eseguendo il test cliccando qui sotto.
Supporto Browser
IP: 216.73.216.221
