Flexbox

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

Parliamo del contenitore flex.

Per creare un contenitore flex, imposta la proprietà display su flex,

.container {
  display: flex;
}

Questo può funzionare con la seguente parte HTML,

<div class="container">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
</div>

Sfida

Facile

Crea un contenitore flex.

Ti viene fornito il codice HTML, il tuo compito è aggiungere il codice CSS mancante.

Nota: non modificare il codice HTML fornito né il CSS che colora 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>4</div>
        </div>
    </body>
</html>

Tutte le lezioni di CSS Flexbox - Il corso completo

1Introduzione

Introduzione Contenitore ed elementi

2Contenitore Flex

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

3Elementi flex

Elementi figli order flex-grow align-self

Esercitati da solo: Playground Web