۝ OraWeb.it ۝ align-items

CSS align-items

La proprietà CSS3 align-items definisce l'allineamento degli elementi lungo l'asse trasversale del contenitore

La proprietà align-items viene utilizzata per allineare gli elementi flessibili lungo l'asse trasversale di un contenitore (perpendicolare all'asse principale). Quando un contenitore Flexbox o Grid ha spazio extra lungo l'asse trasversale, questa proprietà ne determina il posizionamento. Essa influenza anche il comportamento degli elementi figli rispetto alla loro posizione verticale (se l'asse principale è orizzontale) o orizzontale (se l'asse principale è verticale).

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

Sintassi

align-items: flex-start | flex-end | center | baseline | stretch;

Significato dei valori principali:

flex-start: gli elementi si allineano all'inizio dell'asse trasversale.
flex-end: gli elementi si allineano alla fine dell'asse trasversale.
center: gli elementi sono centrati lungo l'asse trasversale.
baseline: gli elementi si allineano lungo la loro linea di base (utilizzato soprattutto con il testo).
stretch (default): gli elementi si estendono per riempire completamente l'asse trasversale.

Esempio proprietà: align-items

Codice Esempio: align-items

CODE: HTML preleva codice

```
<!DOCTYPE html>
```
```
<html lang="it">
```
```
<head>
```
```
    <meta charset="UTF-8">
```

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Allineamento con Flexbox</title>

```
    <style>
```

        /* Stile di base per la pagina */

```
        body {
```

            font-family: Arial, sans-serif;

```
            margin: 0;
```
```
            padding: 0;
```
```
            background-color: #f8f8f8;
```
```
            display: flex;
```
```
            justify-content: center;
```
```
            align-items: center;
```
```
            height: 100vh;
```
```
        }
```
```
 
```
```
        /* Contenitore Flex */
```
```
        .container {
```
```
            display: flex;
```

            flex-wrap: wrap; /* Gli elementi si sposteranno su più righe se necessario */

            justify-content: space-around; /* Distribuisce gli elementi orizzontalmente */

            align-items: center; /* Allinea gli elementi al centro lungo l'asse trasversale (verticale) */

            height: 300px; /* Altezza del contenitore */

            width: 95%; /* Larghezza del contenitore */

```
            background-color: #e0f7fa;
```
```
            border-radius: 10px;
```
```
            padding: 20px;
```
```
        }
```
```
 
```
```
        /* Stile degli elementi */
```
```
        .item {
```
```
            width: 80px;
```
```
            height: 80px;
```
```
            background-color: #4CAF50;
```
```
            color: white;
```
```
            display: flex;
```
```
            justify-content: center;
```
```
            align-items: center;
```
```
            font-size: 14px;
```
```
            margin: 5px;
```
```
            border-radius: 5px;
```

            transition: transform 0.3s ease;

```
        }
```
```
 
```

        /* Quando si passa sopra l'elemento, aumenta la dimensione */

```
        .item:hover {
```
```
            transform: scale(1.1);
```
```
        }
```
```
 
```

        /* Elemento speciale con align-self */

```
        .item:nth-child(4) {
```

            align-self: flex-start; /* Sovrascrive l'allineamento e allinea questo elemento in alto */

```
            background-color: #FF5733;
```
```
        }
```
```
 
```
```
        /* Titolo */
```
```
        h1 {
```
```
            text-align: center;
```
```
            color: #333;
```
```
        }
```
```
    </style>
```
```
</head>
```
```
<body>
```
```
    <div>
```

        <h1>Allineamento con Flexbox: align-items e align-self</h1>

```
        <div class="container">
```

            <div class="item">Item 1</div>

            <div class="item">Item 2</div>

            <div class="item">Item 3</div>

            <div class="item">Item 4</div>

            <div class="item">Item 5</div>

```
        </div>
```
```
    </div>
```
```
</body>
```
```
</html>
```

Risultato: align-items

Prova questo esempio

DEMO

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 align-items

La proprietà CSS3 align-items definisce l'allineamento degli elementi lungo l'asse trasversale del contenitore

Sintassi

Significato dei valori principali:

Esempio proprietà: align-items

Supporto Browser

Follow us

Quick Links

Information

Contact Information