FLEXBOX CON I CSS - SVILUPPO WEB MARCOALBASINI

CSS FLEXBOX

Prima di Flexbox Layout, c’erano quattro modalità di layout:

Block, per sezioni in una pagina web
Inline, per il testo
Table, per dati di tabelle bidimensionali
Positioned, per la posizione esplicita di un elemento

Il CSS Flexbox Layout semplifica la progettazione di strutture di layout flessibili e reattive senza utilizzare float o posizionamento. Per iniziare a utilizzare il modello Flexbox, si deve prima definire un flex container. Il Flexible Box Module, solitamente indicato come flexbox, è stato progettato come modello di layout unidimensionale e come metodo in grado di offrire una distribuzione dello spazio tra gli elementi in un’interfaccia e potenti capacità di allineamento. Quando descriviamo flexbox come unidimensionale, stiamo descrivendo il fatto che flexbox si occupa del layout in una dimensione alla volta, come riga o come colonna. Questo può essere in contrasto con il modello bidimensionale CSS Grid Layout, che controlla colonne e righe insieme.

I DUE ASSI DI FLEXBOX

Quando si lavora con flexbox è necessario pensare in termini di due assi. L’asse principale e l’asse trasversale. L’asse principale è definito dalla proprietà flex-direction e l’asse trasversale è perpendicolare ad esso. Tutto ciò che facciamo con flexbox fa riferimento a questi assi; quindi, vale la pena capire come funzionano fin dall’inizio. L’asse principale è definito dalla proprietà flex-direction, che ha quattro possibili valori:

row
row-reverse
column
column-reverse

Scegliendo row o row-reverse, l’asse principale scorrerà lungo la riga.

MAIN AXIS FLEX-DIRECTION ROW

MAIN AXIS FLEX DIRECTION COLUMN

Scegliendo column o column-reverse l’asse principale scorrerà dalla parte superiore della pagina verso il basso, nella direzione del blocco.

L’ASSE TRASVERSALE

L’asse trasversale è perpendicolare all’asse principale, quindi se flex-direction (asse principale) è impostata su row o reverse-row, l’asse trasversale scorre lungo le colonne.

Se l’asse principale è column o reverse-column, l’asse trasversale scorre lungo le righe.

IL FLEX CONTAINER

Un’area di un documento disposta utilizzando flexbox è chiamata contenitore flessibile (flex container). Per creare un contenitore flessibile, impostiamo il valore della proprietà display del contenitore dell’area su flex o inline-flex. Non appena lo facciamo, i figli diretti di quel contenitore diventano elementi flessibili (flex items). Come con tutte le proprietà in CSS, vengono definiti alcuni valori iniziali, quindi durante la creazione di un contenitore flessibile tutti gli elementi flessibili contenuti si comporteranno nel modo seguente.

COMPORTAMENTO DEGLI ELEMENTI FLESSIBILI (FLEX ITEMS)

Gli items vengono visualizzati in una riga (l’impostazione predefinita della proprietà flex-direction è row).
Gli items iniziano dal bordo iniziale dell’asse principale.
Gli items non si estendono sulla dimensione principale, ma possono ridursi.
Gli items si allungheranno per riempire le dimensioni dell’asse trasversale.
La proprietà flex-basis è impostata su auto.
La proprietà flex-wrap è impostata su nowrap.

Il risultato è che gli elementi flex items si allineeranno tutti in una riga, utilizzando la dimensione del contenuto come dimensione nell’asse principale. Se ci sono più items di quelli che possono entrare nel contenitore, ci sarà un overflow in quanto la proprietà flex-wrap ha come valore predefinito nowrap (non andare a capo). Se alcuni elementi sono più alti di altri, tutti gli elementi si allungheranno lungo l’asse trasversale per riempire l’intera dimensione.

PROPRIETA’ DEL FLEX CONTAINER

Le proprietà del contenitore flessibile (flex-container) sono:

flex-direction
flex-wrap
flex-flow
justify-content
align-items
align-content

LA PROPRIETA’ FLEX-DIRECTION

La proprietà flex-direction definisce in quale direzione il contenitore flessibile (flex container) vuole impilare gli elementi flessibili (flex items)

Il valore column impila i flex items verticalmente (from top to bottom)
Il valore column-reverse impila i flex items verticalmente (from bottom to top)
Il valore row impila i flex items orizzontalmente (from left to right)
Il valore row-reverse impila i flex items orizzontalmente (form right to left)

Copy to Clipboard

.flex-container1{
         display: flex;
         background-color: darkgreen;
         flex-direction: column;
     }
.flex-container1 > div {
         background-color: goldenrod;
         width: 100px;
        margin: 10px;
        text-align: center;
        line-height: 75px;
        font-size: 30px;
     }
.flex-container2{
        display: flex;
        background-color: darkgreen;
        flex-direction:column-reverse;
    }
.flex-container2 > div {
        background-color: goldenrod;
        width: 100px;
        margin: 10px;
        text-align: center;
        line-height: 75px;
        font-size: 30px;
    }
.flex-container3{
        display: flex;
        background-color: darkgreen;
        flex-direction:row;
    }
.flex-container3 > div {
        background-color: goldenrod;
        width: 100px;
        margin: 10px;
        text-align: center;
        line-height: 75px;
        font-size: 30px;
    }
.flex-container4{
        display: flex;
        background-color: darkgreen;
        flex-direction:row-reverse;
    }
.flex-container4 > div {
        background-color: goldenrod;
        width: 100px;
        margin: 10px;
        text-align: center;
        line-height: 75px;
        font-size: 30px;
    }
h1{text-align: center;background-color: coral;border: 1px solid black;}

2. LA PROPRIETA’ FLEX-WRAP

La proprietà flex-wrap specifica se gli elementi flex devono andare a capo o meno. L’esempio seguente ha 12 flex items, per dimostrare la proprietà.

Il valore wrap specifica che gli elementi flessibili (flex items) eseguiranno il wrapping (l’andare a capo) se necessario
Il valore nowrap specifica che i flex items non andranno a capo (questo è l’impostazione predefinita)
Il valore wrap-reverse specifica che i flex items andranno a capo se necessario, in ordine inverso

Copy to Clipboard

<!DOCTYPE html>
<html lang="it">
<head>
    <meta charset="UTF-8">
    <title>Flex Container</title>
    
</head>
<body>
    <h1 class="header">RIDIMENSIONARE LA FINESTRA DEL BROWSER</h1>
    <br>
    <br>    
    <br>    
    <h1>FLEX WRAP</h1>
    <br>
    <div class="flex-container1">
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
        <div>5</div>
        <div>6</div>
        <div>7</div>
        <div>8</div>
        <div>9</div>
        <div>10</div>
        <div>11</div>
        <div>12</div>
    </div>
    <br>
    <hr>
    <h1>FLEX NO WRAP</h1>
    <div class="flex-container2">
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
        <div>5</div>
        <div>6</div>
        <div>7</div>
        <div>8</div>
        <div>9</div>
        <div>10</div>
        <div>11</div>
        <div>12</div>
    </div>
    <br>
    <hr>
    <h1>FLEX REVERSE WRAP
    </h1>
    <div class="flex-container3">
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
        <div>5</div>
        <div>6</div>
        <div>7</div>
        <div>8</div>
        <div>9</div>
        <div>10</div>
        <div>11</div>
        <div>12</div>
    </div>
    <br>
    <hr>
    <h1>PROPRIETA' FLEX FLOW</h1>
    <div class="flex-container4">
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
        <div>5</div>
        <div>6</div>
        <div>7</div>
        <div>8</div>
        <div>9</div>
        <div>10</div>
        <div>11</div>
        <div>12</div>
    </div>
</body>
</html>

Copy to Clipboard

/*--La proprietà flex-wrap specifica se gli elementi flex (flex-items)
    devono andare a capo o meno.*/
.flex-container1{
         display: flex;
         background-color: darkgreen;
         flex-wrap:wrap;
     }
.flex-container1 > div {
         background-color: goldenrod;
         width: 100px;
        margin: 10px;
        text-align: center;
        line-height: 75px;
        font-size: 30px;
     }
.flex-container2{
        display: flex;
        background-color: darkgreen;
        flex-wrap: nowrap;
    }
.flex-container2 > div {
        background-color: goldenrod;
        width: 100px;
        margin: 10px;
        text-align: center;
        line-height: 75px;
        font-size: 30px;
    }
.flex-container3{
        display: flex;
        background-color: darkgreen;
        flex-wrap: wrap-reverse;
    }
.flex-container3 > div {
        background-color: goldenrod;
        width: 100px;
        margin: 10px;
        text-align: center;
        line-height: 75px;
        font-size: 30px;
    }
.flex-container4{
        display: flex;
        background-color: darkgreen;
        flex-flow: row wrap;
    }
.flex-container4 > div {
        background-color: goldenrod;
        width: 100px;
        margin: 10px;
        text-align: center;
        line-height: 75px;
        font-size: 30px;
    }
    /*--La proprietà flex-flow è una proprietà 
        abbreviata per l'impostazione delle proprietà 
        flex-direction e flex-wrap.*/
h1{text-align: center;background-color: coral;border: 1px solid black;}
h1.header{text-align: center;background-color: yellow;border: 1 px solid red;}

3. LA PROPRIETA’ FLEX-FLOW

La proprietà flex-flow è una proprietà abbreviata per l’impostazione delle proprietà flex-direction e flex-wrap.

4. LA PROPRIETA’ JUSTIFY-CONTENT

La proprietà justify-content viene utilizzata per allineare i flex items:

Il valore center allinea i flex items al centro del contenitore
Il valore flex-start allinea gli elementi all’inizio del contenitore (questa è l’impostazione predefinita)
Il valore flex-end allinea i flex items alla fine del contenitore
Il valore space-around mostra i flex items con uno spazio prima, tra e dopo le righe
Il valore space-between mostra i flex items con uno spazio tra le righe

Copy to Clipboard

.flex-container1{
    display: flex;
    background-color: darkgreen;
    justify-content:center;
}
.flex-container1 > div {
    background-color: goldenrod;
    width: 100px;
    margin: 10px;
    text-align: center;
    line-height: 75px;
    font-size: 30px;
}
.flex-container2{
   display: flex;
   background-color: darkgreen;
   justify-content: flex-start;
}
.flex-container2 > div {
   background-color: goldenrod;
   width: 100px;
   margin: 10px;
   text-align: center;
   line-height: 75px;
   font-size: 30px;
}
.flex-container3{
   display: flex;
   background-color: darkgreen;
   justify-content: flex-end;
}
.flex-container3 > div {
   background-color: goldenrod;
   width: 100px;
   margin: 10px;
   text-align: center;
   line-height: 75px;
   font-size: 30px;
}
.flex-container4{
   display: flex;
   background-color: darkgreen;
   justify-content: space-around;
}
.flex-container4 > div {
   background-color: goldenrod;
   width: 100px;
   margin: 10px;
   text-align: center;
   line-height: 75px;
   font-size: 30px;
}
.flex-container5{
    display: flex;
    background-color: darkgreen;
    justify-content: space-between;
 }
 .flex-container5 > div {
    background-color: goldenrod;
    width: 100px;
    margin: 10px;
    text-align: center;
    line-height: 75px;
    font-size: 30px;
 }
h1{text-align: center;background-color: coral;border: 1px solid black;}

5. LA PROPRIETA’ ALIGN-ITEMS

La proprietà align-items viene utilizzata per allineare i flex items. Nella figura seguente è mostrato un esempio con align-items center:

Il valore center allinea i flex items al centro del contenitore
Il valore flex-start allinea i flex items nella parte superiore del contenitore
Il valore flex-end allinea i flex items nella parte inferiore del contenitore
Il valore stretch estende i flex items per riempire il contenitore (questo è l’impostazione predefinita)
Il valore base-line allinea i flex items come si allineano le linee di base

Copy to Clipboard

.flex-container1{
    display: flex;
    background-color: darkgreen;
    height: 200px;
    align-items:center;
}
.flex-container1 > div {
    background-color: goldenrod;
    width: 100px;
    margin: 10px;
    text-align: center;
    line-height: 75px;
    font-size: 30px;
}
.flex-container2{
   display: flex;
   background-color: darkgreen;
   height: 200px;
   align-items: flex-start;
}
.flex-container2 > div {
   background-color: goldenrod;
   width: 100px;
   margin: 10px;
   text-align: center;
   line-height: 75px;
   font-size: 30px;
}
.flex-container3{
   display: flex;
   height: 200px;
   background-color: darkgreen;
   align-items: flex-end;
}
.flex-container3 > div {
   background-color: goldenrod;
   width: 100px;
   margin: 10px;
   text-align: center;
   line-height: 75px;
   font-size: 30px;
}
.flex-container4{
   display: flex;
   background-color: darkgreen;
   height: 200px;
   align-items: stretch;
}
.flex-container4 > div {
   background-color: goldenrod;
   width: 100px;
   margin: 10px;
   text-align: center;
   line-height: 75px;
   font-size: 30px;
}
.flex-container5{
   display: flex;
   background-color: darkgreen;
   height: 200px;
   align-items:baseline;
}
.flex-container5 > div {
   background-color: goldenrod;
   width: 100px;
   margin: 10px;
   text-align: center;
   line-height: 75px;
   font-size: 30px;
}
h1{text-align: center;background-color: coral;border: 1px solid black;}

6. LA PROPRIETA’ ALIGN-CONTENT

La proprietà align-content viene utilizzata per allineare le flex line.

Il valore space-between mostra le flex line con uguale spazio tra loro
Il valore space-around mostra le flex line con uno spazio prima, in mezzo e dopo di esse
Il valore stretch allunga le flex line per occupare lo spazio rimanente (questo è l’impostazione predefinita)
I display del valore center mostrano le flex line al centro del contenitore
Il valore flex-start mostra le flex line all’inizio del contenitore
Il valore flex-end mostra le flex line alla fine del contenitore

Copy to Clipboard

<!DOCTYPE html>
<html lang="it">
<head>
    <meta charset="UTF-8">
    <title>Flex Container</title>
    
</head>
<body>
    <h1 class="header">RIDIMENSIONARE LA FINESTRA DEL BROWSER</h1>
    <br>
    <br>
    <br>
    <h1>ALIGN CONTENT CENTER</h1>
    <br>
    <div class="flex-container1">
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
        <div>5</div>
        <div>6</div>
        <div>7</div>
        <div>8</div>
        <div>9</div>
        <div>10</div>
        <div>11</div>
        <div>12</div>
    </div>
    <br>
    <hr>
    <h1>ALIGN CONTENT FLEX-START</h1>
    <div class="flex-container2">
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
        <div>5</div>
        <div>6</div>
        <div>7</div>
        <div>8</div>
        <div>9</div>
        <div>10</div>
        <div>11</div>
        <div>12</div>
    </div>
    <br>
    <hr>
    <h1>ALIGN CONTENT FLEX-END
    </h1>
    <div class="flex-container3">
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
        <div>5</div>
        <div>6</div>
        <div>7</div>
        <div>8</div>
        <div>9</div>
        <div>10</div>
        <div>11</div>
        <div>12</div>
    </div>
    <br>
    <hr>
    <h1>ALIGN CONTENT SPACE BETWEEN</h1>
    <div class="flex-container4">
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
        <div>5</div>
        <div>6</div>
        <div>7</div>
        <div>8</div>
        <div>9</div>
        <div>10</div>
        <div>11</div>
        <div>12</div>
    </div>
    <br>
    <hr>
    <h1>ALIGN CONTENT SPACE AROUND</h1>
    <div class="flex-container5">
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
        <div>5</div>
        <div>6</div>
        <div>7</div>
        <div>8</div>
        <div>9</div>
        <div>10</div>
        <div>11</div>
        <div>12</div>
    </div>
</body>
</html>

Copy to Clipboard

.flex-container1{
    display: flex;
    background-color: darkgreen;
    height: 600px;
    flex-wrap: wrap;
    align-content: center;
}
.flex-container1 > div {
    background-color: goldenrod;
    width: 100px;
    margin: 10px;
    text-align: center;
    line-height: 75px;
    font-size: 30px;
}
.flex-container2{
   display: flex;
   background-color: darkgreen;
   height: 600px;
   flex-wrap: wrap;
   align-content: flex-start;
}
.flex-container2 > div {
   background-color: goldenrod;
   width: 100px;
   margin: 10px;
   text-align: center;
   line-height: 75px;
   font-size: 30px;
}
.flex-container3{
   display: flex;
   background-color: darkgreen;
   height: 600px;
   flex-wrap: wrap;
   align-content: flex-end;
}
.flex-container3 > div {
   background-color: goldenrod;
   width: 100px;
   margin: 10px;
   text-align: center;
   line-height: 75px;
   font-size: 30px;
}
.flex-container4{
   display: flex;
   background-color: darkgreen;
   height: 600px;
   flex-wrap: wrap;
   align-content:space-between;
}
.flex-container4 > div {
   background-color: goldenrod;
   width: 100px;
   margin: 10px;
   text-align: center;
   line-height: 75px;
   font-size: 30px;
}
.flex-container5{
    display: flex;
    background-color: darkgreen;
    height: 600px;
    flex-wrap: wrap;
    align-content:space-around;
 }
 .flex-container5 > div {
    background-color: goldenrod;
    width: 100px;
    margin: 10px;
    text-align: center;
    line-height: 75px;
    font-size: 30px;
 }
h1{text-align: center;background-color: coral;border: 1px solid black;}
h1.header{text-align: center;background-color: yellow;border: 1 px solid red;}

CSS FLEX ITEMS

Gli elementi figlio diretti di un contenitore flessibile (flex container) diventano automaticamente elementi flessibili (flex items). Le proprietà dell’elemento flessibile (flex item) sono:

order
flex-grow
flex-shrink
flex-basis
flex
align-self

NB: Nel codice di esempio sono spiegate tutte queste proprietà.

Copy to Clipboard

<!DOCTYPE html>
        <html lang="it">
        <head>
            <meta charset="UTF-8">
            <title>Flex Items</title>
            <style>
                .flex-container {
                  display: flex;
                  align-items: stretch;
                  background-color:darkgreen;
                  height: 200px;
                }
                .flex-container>div {
                  background-color: goldenrod;
                  color: white;
                  width: 100px;
                  margin: 10px;
                  text-align: center;
                  line-height: 75px;
                  font-size: 30px;
                }
                h1{text-align: center;background-color: coral;border: 1px solid black;}
                </style>
        </head>
        <body>
            <h1>PROPRIETA' ALIGN-SELF</h1>
            <br>
            <div class="flex-container">
                <div>1</div>
                <div>2</div>
                <div>3</div>
                <div>4</div>
                <div>5</div>
                <div style="align-self:center">6</div>
                <div>7</div>
                <div>8</div>
            </div>
        </body>
        </html>

Copy to Clipboard

<!DOCTYPE html>
    <html lang="it">
    <head>
        <meta charset="UTF-8">
        <title>Flex Items</title>
        <style>
            .flex-container {
              display: flex;
              align-items: stretch;
              background-color:darkgreen;
            }
            .flex-container>div {
              background-color: goldenrod;
              color: white;
              width: 100px;
              margin: 10px;
              text-align: center;
              line-height: 75px;
              font-size: 30px;
            }
            h1{text-align: center;background-color: coral;border: 1px solid black;}
            </style>
    </head>
    <body>
        <h1>PROPRIETA' FLEX</h1>
        <br>
        <div class="flex-container">
            <div>1</div>
            <div>2</div>
            <div>3</div>
            <div>4</div>
            <div>5</div>
            <div style="flex: 0 0 200px">6</div>
            <div>7</div>
            <div>8</div>
        </div>
    </body>
    </html>

Copy to Clipboard

<!DOCTYPE html>
    <html lang="it">
    <head>
        <meta charset="UTF-8">
        <title>Flex Items</title>
        <style>
            .flex-container {
              display: flex;
              align-items: stretch;
              background-color:darkgreen;
            }
            .flex-container>div {
              background-color: goldenrod;
              color: white;
              width: 100px;
              margin: 10px;
              text-align: center;
              line-height: 75px;
              font-size: 30px;
            }
            h1{text-align: center;background-color: coral;border: 1px solid black;}
            </style>
    </head>
    <body>
        <h1>PROPRIETA' FLEX-BASIS</h1>
        <br>
        <div class="flex-container">
            <div>1</div>
            <div>2</div>
            <div>3</div>
            <div>4</div>
            <div>5</div>
            <div style="flex-basis: 400px">6</div>
            <div>7</div>
            <div>8</div>
        </div>
    </body>
    </html>

Copy to Clipboard

<!DOCTYPE html>
    <html lang="it">
    <head>
        <meta charset="UTF-8">
        <title>Flex Items</title>
        <style>
            .flex-container {
              display: flex;
              align-items: stretch;
              background-color:darkgreen;
            }
            .flex-container>div {
              background-color: goldenrod;
              color: white;
              width: 100px;
              margin: 10px;
              text-align: center;
              line-height: 75px;
              font-size: 30px;
            }
            h1{text-align: center;background-color: coral;border: 1px solid black;}
            h1.header{text-align: center;background: yellow;border: 1px solid red;}
            </style>
    </head>
    <body>
        <h1 class="header">RIDIMENSIONARE LA FINESTRA DEL BROWSER</h1>
        <br>
        <br>  
        <br>   
        <h1>PROPRIETA' FLEX-SHRINK</h1>
        <br>
        <div class="flex-container">
            <div>1</div>
            <div>2</div>
            <div>3</div>
            <div>4</div>
            <div>5</div>
            <div style="flex-shrink: 0">6</div>
            <div>7</div>
            <div>8</div>
            <div>9</div>
            <div>10</div>
            <div>11</div>
            <div>12</div>
        </div>
    </body>
    </html>

LINK AI POST PRECEDENTI

PREVIOUS POST LINKS

LINK AL CODICE SU GITHUB

GITHUB

I FLEXBOX CON I CSS

CSS FLEXBOX

I DUE ASSI DI FLEXBOX

MAIN AXIS FLEX-DIRECTION ROW

MAIN AXIS FLEX DIRECTION COLUMN

L’ASSE TRASVERSALE

IL FLEX CONTAINER

COMPORTAMENTO DEGLI ELEMENTI FLESSIBILI (FLEX ITEMS)

PROPRIETA’ DEL FLEX CONTAINER

CSS FLEX ITEMS

LINK AI POST PRECEDENTI

LINK AL CODICE SU GITHUB

Scritto da: Marco Albasini

Scrivi un commento Annulla risposta

Categories

Archive

I FLEXBOX CON I CSS

I FLEXBOX CON I CSS

CSS FLEXBOX

I DUE ASSI DI FLEXBOX

MAIN AXIS FLEX-DIRECTION ROW

MAIN AXIS FLEX DIRECTION COLUMN

L’ASSE TRASVERSALE

IL FLEX CONTAINER

COMPORTAMENTO DEGLI ELEMENTI FLESSIBILI (FLEX ITEMS)

PROPRIETA’ DEL FLEX CONTAINER

CSS FLEX ITEMS

LINK AI POST PRECEDENTI

LINK AL CODICE SU GITHUB

Scritto da: Marco Albasini

Post correlati

SELETTORI SEMPLICI IN CSS

ALTRI SELETTORI CSS

I COLORI IN CSS

COMPRENDERE IL BOX MODEL NEI CSS

IL POSIZIONAMENTO CON I CSS

QUERY MULTIMEDIALI – MEDIA QUERIES

CSS FONTS

Scrivi un commento Annulla risposta

Categories

Archive