۝ OraWeb.it ۝ flex-shrink

CSS flex-shrink

La proprietà CSS3 `flex-shrink` controlla la capacità di restringimento degli elementi

La proprietà flex-shrink determina quanto un elemento può essere ridotto per adattarsi allo spazio disponibile nel contenitore flex. È particolarmente utile quando più elementi competono per lo spazio in un layout reattivo. Introdotta nel modulo CSS3 Flexbox, lavora in combinazione con flex-grow e flex-basis.

HOSTING • VPS • DEDICATED SERVER • HOUSING • SSL • PEC • CLOUD • DOMAIN

Sintassi

flex-shrink: number;

Significato dei valori principali:

0: l’elemento non si restringe, anche se non c'è spazio sufficiente.
1: valore predefinito. L’elemento può restringersi in modo proporzionale agli altri.
n (numero intero o decimale): maggiore è il numero, maggiore sarà la capacità dell’elemento di restringersi rispetto agli altri. Ad esempio, flex-shrink: 2 si ridurrà il doppio rispetto a un elemento con flex-shrink: 1.

Esempio proprietà: flex-shrink

Codice Esempio: flex-shrink

CODE: CSS preleva codice

```
.flex-shrink-container {
```
```
  display: flex;
```
```
  width: 400px;
```
```
  background-color: #eee;
```
```
  gap: 10px;
```
```
  padding: 10px;
```
```
  overflow: hidden;
```
```
}
```
```
 
```
```
.flex-shrink-item {
```
```
  background-color: #3a86ff;
```
```
  color: white;
```
```
  text-align: center;
```
```
  padding: 20px;
```
```
  width: 150px;
```
```
  font-weight: bold;
```
```
  border-radius: 4px;
```
```
}
```
```
 
```
```
.shrink1 {
```
```
  flex-shrink: 1;
```
```
}
```
```
 
```
```
.shrink2 {
```
```
  flex-shrink: 2;
```
```
}
```
```
 
```
```
.shrink0 {
```
```
  flex-shrink: 0;
```
```
}
```

Contenuto Esempio: flex-shrink

Esempio di utilizzo di `flex-shrink`

In questo esempio, tutti gli elementi hanno larghezza fissa, ma valori diversi di flex-shrink. Quando il contenitore non ha spazio sufficiente, gli elementi si restringono in proporzione al loro valore:

Shrink 1

Shrink 2

Shrink 0

CSS e HTML per l’esempio con `flex-shrink`:

  
  <style>
    .flex-shrink-container {
      display: flex;
      width: 400px;
      background-color: yellow;
      gap: 10px;
      padding: 10px;
      overflow: hidden;
    }

    .flex-shrink-item {
      background-color: #3a86ff;
      color: white;
      text-align: center;
      padding: 20px;
      width: 150px;
      font-weight: bold;
      border-radius: 4px;
    }

    .shrink1 {
      flex-shrink: 1;
    }

    .shrink2 {
      flex-shrink: 2;
    }

    .shrink0 {
      flex-shrink: 0;
    }
  </style>

  <div class="flex-shrink-container">
    <div class="flex-shrink-item shrink1">Shrink 1</div>
    <div class="flex-shrink-item shrink2">Shrink 2</div>
    <div class="flex-shrink-item shrink0">Shrink 0</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.

CSS flex-shrink

La proprietà CSS3 `flex-shrink` controlla la capacità di restringimento degli elementi

Sintassi

Significato dei valori principali:

Esempio proprietà: flex-shrink

Esempio di utilizzo di `flex-shrink`

CSS e HTML per l’esempio con `flex-shrink`:

Supporto Browser

Follow us

Quick Links

Information

Contact Information

CSS flex-shrink

La proprietà CSS3 flex-shrink controlla la capacità di restringimento degli elementi

Sintassi

Significato dei valori principali:

Esempio proprietà: flex-shrink

Esempio di utilizzo di flex-shrink

CSS e HTML per l’esempio con flex-shrink:

Supporto Browser

Follow us

Quick Links

Information

Contact Information

La proprietà CSS3 `flex-shrink` controlla la capacità di restringimento degli elementi

Esempio di utilizzo di `flex-shrink`

CSS e HTML per l’esempio con `flex-shrink`: