CSS
HTML
JavaScript
PHP
Introduzione
Coming Soon
Generatori
Varie

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

flex-basis: value;

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-grow per 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

CODE: CSSpreleva codice
  1. .flex-basis-container {
  2.   display: flex;
  3.   width: 100%;
  4.   background-color: #eee;
  5.   gap: 10px;
  6.   height: 150px;
  7. }
  8.  
  9. .flex-basis-item1 {
  10.   background-color: #50a14f;
  11.   color: white;
  12.   padding: 20px;
  13.   flex-basis: 100px;
  14.   flex-grow: 1;
  15. }
  16.  
  17. .flex-basis-item2 {
  18.   background-color: #ff6347;
  19.   color: white;
  20.   padding: 20px;
  21.   flex-basis: 200px;
  22.   flex-grow: 1;
  23. }
  24.  
  25. .flex-basis-item3 {
  26.   background-color: #3a86ff;
  27.   color: white;
  28.   padding: 20px;
  29.   flex-basis: 150px;
  30.   flex-grow: 1;
  31. }

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.


100px
200px
150px

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

Browser Support

I Cookie su questo sito:

Il nostro sito utilizza cookie e altre tecnologie in modo tale che sia noi, sia i nostri partner, possiamo ricordarci di te e capire come tu e gli altri visitatori utilizzate il nostro sito. Qui puoi trovare ulteriori informazioni sui cookie e le altre tecnologie. Chiudendo questo banner o continuando la navigazione acconsenti all'uso dei cookie. Acconsento Info Cookies