align content

La proprietà align content serve, come già detto, per allineare i contenitori multi-riga. In particolare ha la funzione di allineare i box flessibili sull’asse perpendicolare del contenitore, cioè l’asse y. Questa proprietà, come le altre viste nelle precedenti lezioni, deve essere utilizzata assieme alla proprietà display:flex, che come già detto serve a rendere il contenitore padre flessibile.

align content valori ammissibili

I valori ammissibili per questa proprietà sono dunque flex-start, flex-end, stretch, center, baseline, space-between e space-around. Se gli elementi interni dispongono del valore height, allora il valore di default è flex-start, altrimenti è stretch.

align content esempi

Facciamo un primo esempio impostando il valore a flex-end, in modo da ottenere gli elementi contenitori (box) allineati in basso lungo l’asse y.

Ecco dunque il codice HTML e CSS di esempio proposto:

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>Esempio proprietà align content CSS</title>
    <style>
      .container {
        width:700px;
        height:300px;
        margin-top:20px;
        background-color: #ff00ff;
        display: flex;
        flex-wrap: wrap;
        align-content:flex-end;
      }
      .container > div {
        background-color: #eee;
        font-size:18px;
        text-align:center;
        width: 150px;
        padding: 10px;
        margin:10px;
      }
  </style>
  </head>
  <body>
  <h1>Proprietà align-content</h1>
  <div class="container">
    <div>1-align-content: flex-end;</div>
    <div>2-align-content: flex-end</div>
    <div>3-align-content: flex-end;</div>
    <div>4-align-content: flex-end;</div>
    <div>5-align-content: flex-end</div>
    <div>6-align-content: flex-end;</div>
  </div>
  </body>
</html>

Visualizzando questo codice in un browser si vedono i box allineati in basso all’asse verticale, come da figura sotto:

align content css

aling-content:center;

Cambiamo adesso l’esempio di prima impostando la proprietà:

        align-content:center;

Come potete notare dalla figura in basso otterremo un risultato di questo tipo, con gli elementi allineati al centro lungo l’asse perpendicolare.

align contente center

I contenitori sono allineati al centro dell’asse perpendicolare (asse y).

aling-content:flex-start;

Adesso cambiamo la proprietà precedente impostando:

   align-content:flex-start;
flex start

In questo caso, come si evince dall’immagine, gli elementi contenitori sono allineati in alto.

align-content:stretch;

Se invece impostiamo la proprietà:

align-content:stretch;

Gli elementi riempiono l’intero contenitore, come da immagine sotto.

Questo rappresenta il valore di default, nel caso in cui height sia specificato.

align-content:space-between;

Proviamo nuovamente a cambiare il valore della proprietà, impostando il seguente:

align-content:space-between;

In questo caso i box sono distanziati tra di loro:

space between

align-content:space-around;

Infine proviamo anche la proprietà:

align-content:space-around;

Vedremo in questo caso che gli elementi sono allineati con dello spazio attorno.

space around

In questa lezione abbiamo proposto dei semplici esempi con la proprietà align content, nelle prossime lezioni parleremo di altre proprietà e sicuramente riproremo dei semplici layout da realizzare utilizzando tutte queste interessanti proprietà.

Alcuni link utili

Indice tutorial CSS3

Indice tutorial HTML

Fogli di stile interni, esterni ed in linea

Fogli di stile esterni

Selettori

Come impostare le pseudo-classi

Reset CSS

CSS responsive

Font nei CSS

Proprietà Overflow nei CSS

La proprietà position

Proprietà z-index

Autore dell'articolo: Cristina

Avatar per Coding Creativo

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *