۝ OraWeb.it ۝ flex-grow

CSS flex-grow

La proprietà CSS3 `flex-grow` controlla la crescita proporzionale degli elementi flessibili

La proprietà flex-grow indica quanto un elemento flex può espandersi per occupare lo spazio disponibile nel contenitore. Il valore è proporzionale: un elemento con flex-grow: 2 crescerà il doppio rispetto a uno con flex-grow: 1. È una proprietà fondamentale introdotta in CSS3 Flexbox.

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

Sintassi

flex-grow: number;

Significato dei valori principali:

0: valore predefinito. L’elemento non cresce, mantiene la sua dimensione base.
1: l’elemento può crescere per occupare lo spazio disponibile, in proporzione con gli altri.
n (numero intero o decimale): quanto maggiore è il numero, tanto più spazio l’elemento riceverà rispetto agli altri. Ad esempio, flex-grow: 2 riceve il doppio dello spazio rispetto a flex-grow: 1.

Esempio proprietà: flex-grow

Codice Esempio: flex-grow

CODE: CSS preleva codice

```
.flex-grow-container {
```
```
  display: flex;
```
```
  width: 100%;
```
```
  background-color: #eee;
```
```
  gap: 10px;
```
```
  padding: 10px;
```
```
  height: 100px;
```
```
}
```
```
 
```
```
.flex-grow-item1 {
```
```
  background-color: #50a14f;
```
```
  color: white;
```
```
  padding: 10px;
```
```
  flex-grow: 1;
```
```
  text-align: center;
```
```
  border-radius: 4px;
```
```
}
```
```
 
```
```
.flex-grow-item2 {
```
```
  background-color: #ff6347;
```
```
  color: white;
```
```
  padding: 10px;
```
```
  flex-grow: 2;
```
```
  text-align: center;
```
```
  border-radius: 4px;
```
```
}
```
```
 
```
```
.flex-grow-item3 {
```
```
  background-color: #3a86ff;
```
```
  color: white;
```
```
  padding: 10px;
```
```
  flex-grow: 1;
```
```
  text-align: center;
```
```
  border-radius: 4px;
```
```
}
```

Contenuto Esempio: flex-grow

Esempio di utilizzo di `flex-grow`

In questo esempio, gli elementi hanno valori di flex-grow differenti, quindi crescono in modo proporzionale all’interno del contenitore:

Grow 1

Grow 2

Grow 1

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

  
  <style>
    .flex-grow-container {
      display: flex;
      width: 100%;
      background-color: #eee;
      gap: 10px;
      padding: 10px;
      height: 100px;
    }

    .flex-grow-item1 {
      background-color: #50a14f;
      color: white;
      padding: 10px;
      flex-grow: 1;
      text-align: center;
      border-radius: 4px;
    }

    .flex-grow-item2 {
      background-color: #ff6347;
      color: white;
      padding: 10px;
      flex-grow: 2;
      text-align: center;
      border-radius: 4px;
    }

    .flex-grow-item3 {
      background-color: #3a86ff;
      color: white;
      padding: 10px;
      flex-grow: 1;
      text-align: center;
      border-radius: 4px;
    }
  </style>

  <div class="flex-grow-container">
    <div class="flex-grow-item1">Grow 1</div>
    <div class="flex-grow-item2">Grow 2</div>
    <div class="flex-grow-item3">Grow 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.

CSS flex-grow

La proprietà CSS3 `flex-grow` controlla la crescita proporzionale degli elementi flessibili

Sintassi

Significato dei valori principali:

Esempio proprietà: flex-grow

Esempio di utilizzo di `flex-grow`

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

Supporto Browser

Follow us

Quick Links

Information

Contact Information

CSS flex-grow

La proprietà CSS3 flex-grow controlla la crescita proporzionale degli elementi flessibili

Sintassi

Significato dei valori principali:

Esempio proprietà: flex-grow

Esempio di utilizzo di flex-grow

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

Supporto Browser

Follow us

Quick Links

Information

Contact Information

La proprietà CSS3 `flex-grow` controlla la crescita proporzionale degli elementi flessibili

Esempio di utilizzo di `flex-grow`

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