flex-grow

Lezione 14 di 15 del corso CSS Flexbox - Il corso completo di Coddy.

La proprietà flex-grow definisce la capacità di un elemento flex di crescere (se necessario).

Accetta un numero che funge da proporzione.

Se tutti gli elementi hanno flex-grow impostato su 1, lo spazio rimanente nel contenitore verrà distribuito equamente tra tutti gli elementi figli. Se uno degli elementi figli ha un valore di 2, occuperà il doppio dello spazio rispetto a ciascuno degli altri.

Esempio,

.item {
  flex-grow: 4;
}

Il valore predefinito è 0; i numeri negativi non sono validi.

Sfida

Facile

Ti viene fornito un contenitore flex con tre elementi flex: fai in modo che l’elemento flex centrale cresca il doppio rispetto ai due laterali.

Dovresti assegnare la proprietà flex-grow a tutti gli elementi.

Provalo tu

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="styles.css">
</head>
    <body>
        <div class="container">
            <div>1</div>
            <div>2</div>
            <div>3</div>
        </div>
    </body>
</html>

Tutte le lezioni di CSS Flexbox - Il corso completo

1Introduzione

Introduzione Contenitore ed elementi

2Contenitore Flex

Flexbox flex-direction flex-wrap flex-flow justify-content align-items align-content gap Centratura perfetta

3Elementi flex

Elementi figli orderflex-growalign-self

Esercitati da solo: Playground Web