CSS flex-basis
La proprietà CSS3 flex-basis definisce la dimensione iniziale di un elemento flessibile
La proprietà flex-basis imposta la dimensione di base di un elemento all'interno di un contenitore flex prima che venga influenzata dalla crescita (flex-grow) o dalla riduzione (flex-shrink). Supporta valori in unità di misura CSS, auto, 0 e content (dove supportato). È parte del modulo CSS3 Flexbox.
Sintassi
Significato dei valori principali:
-
auto: valore predefinito. L'elemento utilizza la sua dimensione contenuto o quella definita tramite altre proprietà CSS (es.
width). -
px / %, em, rem, ecc.: definisce una dimensione fissa iniziale per l'elemento. Ad esempio,
flex-basis: 200px;forza la base a 200 pixel. -
0: la dimensione iniziale è nulla. Utile in combinazione con
flex-growper distribuire spazio solo in base alla crescita. -
content: (non ancora ampiamente supportato). La dimensione si basa sul contenuto intrinseco.
Esempio proprietà: flex-basis
Codice Esempio: flex-basis
.flex-basis-container {
display: flex;
width: 100%;
background-color: #eee;
gap: 10px;
height: 150px;
}.flex-basis-item1 {
background-color: #50a14f;
color: white;
padding: 20px;
flex-basis: 100px;
flex-grow: 1;
}.flex-basis-item2 {
background-color: #ff6347;
color: white;
padding: 20px;
flex-basis: 200px;
flex-grow: 1;
}.flex-basis-item3 {
background-color: #3a86ff;
color: white;
padding: 20px;
flex-basis: 150px;
flex-grow: 1;
}
Contenuto Esempio: flex-basis
Esempio di utilizzo di flex-basis
In questo esempio, ogni elemento ha una base diversa stabilita tramite flex-basis, influenzando la loro dimensione iniziale prima di applicare flex-grow.
CSS e HTML per l’esempio con flex-basis:
<style>
.flex-basis-container {
display: flex;
width: 100%;
background-color: #eee;
gap: 10px;
height: 150px;
}
.flex-basis-item1 {
background-color: #50a14f;
color: white;
padding: 20px;
flex-basis: 100px;
flex-grow: 1;
}
.flex-basis-item2 {
background-color: #ff6347;
color: white;
padding: 20px;
flex-basis: 200px;
flex-grow: 1;
}
.flex-basis-item3 {
background-color: #3a86ff;
color: white;
padding: 20px;
flex-basis: 150px;
flex-grow: 1;
}
</style>
<div class="flex-basis-container">
<div class="flex-basis-item1">100px</div>
<div class="flex-basis-item2">200px</div>
<div class="flex-basis-item3">150px</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
