align items

La proprietà align items serve ad allineare i box flessibili sull’asse perpendicolare del contenitore, cioè l’asse y. Anche questa proprietà, come le precedenti, deve essere utilizzata assieme alla proprietà display:flex, che come già spiegato serve a rendere il contenitore padre flessibile.

align items valori ammissibili

I valori ammissibili per questa proprietà sono: stretch, flex-start, flex-end, center e baseline.

Per poter vedere gli effetti di allineamento lungo l’asse y occorre utilizzare anche la proprietà height che stabilisce l’altezza di un elemento. Se gli elementi interni dispongono dunque del valore height, allora il valore di default è flex-start, altrimenti è stretch.

align items esempi

Analizziamo un primo esempio in cui impostiamo il valore center per la proprietà align-items.

Come potete notare ho impostato un’altezza di 200 pixel.

Ecco dunque il codice di esempio:

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

Questo è il risultato prodotto dal codice presentato nell’esempio sopra:

align-items center

Adesso cambiamo impostazioni inserendo la seguente proprietà:

align-items: stretch;

Avremo un risultato come da figura sotto:

align-items stretch

Ricordiamo che stretch è il valore di default se non viene specificata l’altezza del box, altrimenti è flex-start.

Adesso cambiamo nuovamente l’esempio impostando la proprietà align items con il seguente valore:

align-items: flex-end;

Si avrà un risultato come da figura sotto:

flex end

In questa lezione abbiamo semplicemente fatto dei semplici esempi per capire il funzionamento della proprietà align items. Questa proprietà permette l’allineamento degli elementi lungo l’asse y di un box contenitore.

Nella prossima lezione vedremo la proprietà align content, molto utile per i contenitori multi-riga, cioè per quei contenitori dove almeno ci sono due righe.

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

CSS border – border width

Utilizzare la proprietà border style CSS

Border color CSS

Autore dell'articolo: Cristina

Avatar per Coding Creativo

Lascia un commento

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