۝ OraWeb.it ۝ align-self

CSS align-self

La proprietà CSS3 align-self definisce l'allineamento di un singolo elemento lungo l'asse trasversale del contenitore

La proprietà align-self consente di allineare un singolo elemento figlio all'interno di un contenitore Flexbox o Grid, lungo l'asse trasversale (perpendicolare all'asse principale). Questo permette di sovrascrivere il comportamento di allineamento definito da align-items per un singolo elemento, offrendo un controllo più dettagliato sull'allineamento.

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

Sintassi

Significato dei valori principali:

auto (default): l'elemento usa il valore di align-items del suo contenitore padre.
flex-start: l'elemento si allinea all'inizio dell'asse trasversale del contenitore.
flex-end: l'elemento si allinea alla fine dell'asse trasversale del contenitore.
center: l'elemento è centrato lungo l'asse trasversale del contenitore.
baseline: l'elemento si allinea lungo la sua linea di base, come nel caso del testo.
stretch: l'elemento si estende per riempire completamente l'asse trasversale del contenitore.

Esempio proprietà: align-self

Codice Esempio: align-self

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-self

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-self

La proprietà CSS3 align-self definisce l'allineamento di un singolo elemento lungo l'asse trasversale del contenitore

Sintassi

Significato dei valori principali:

Esempio proprietà: align-self

Supporto Browser

Follow us

Quick Links

Information

Contact Information