logo Portale zerozetasm.it



Contenuto: FLEXBOX

01. Nozioni di base
Bootstrap 4 ha il supporto Flexbox di default attraverso un modulo flessibile per il layout.
Il modulo flexbox reattivo consente di gestire rapidamente allineamento e dimensionamento delle colonne della griglia, della navigazione, dei componenti e altro.
Con Flexbox l'elemento genitore ha la capacità di controllare gli elementi figli diretti al suo interno.

NOTA: la notazione {breakpoint} o breakpoint o BREAKPOINT rappresenta dei segna posti per: sm   md   lg   xl
In tutti gli ESEMPI le classi sm   md   lg   xl sono sempre sensibili a: .flex-BREAKPOINT-* e quindi è possibile controllare i vari punti di interruzione.

NOTA: Nel corso delle spiegazioni lo stile sotto descritto, verrà assunto negli ESEMPI, al solo scopo di rendere evidente la colorazione del layout, altrimenti non visibile.


  <style type="text/css">
    .democ {  
      padding: .75rem;
      background-color: #f0f0f0;
    }
    .democh {  
      padding: .75rem;
      background-color: #f0f0f0;
      height: 250px;
    }
    .demoe {  
      padding: 0.50rem;
      background-color: #e0e0e0;
      border: 1px solid #ccc;  
    }
  </style>


02. Abilitare flexBox
Per abilitare Flexbox su un elemento è possibile applicare una delle seguenti classi: .d-flex o .d-inline-flex
Entrambe le classi sono sensibili ai: .d-BREAKPOINT-flex e .d-BREAKPOINT-inline-flex in modo da poter modificare la visualizzazione flessibile per ogni punto di interruzione.

Sono un contenitore flexbox!

Sono un contenitore flexbox in linea!

Codice 

<div class="d-flex p-3 democ">Sono un contenitore flexbox!</div>
<br>
<div class="d-inline-flex p-3 democ">Sono un contenitore flexbox in linea!</div>

03. flex-row
Impostare la direzione degli elementi flessibili in un contenitore flessibile con le utilità di direzione. Nella maggior parte dei casi puoi omettere la classe orizzontale qui come lo è il browser predefinito row. Tuttavia, è possibile che si verifichino situazioni in cui è necessario impostare in modo esplicito questo valore (come i layout reattivi).
Utilizzare .flex-row per impostare una direzione orizzontale (impostazione predefinita del browser) o .flex-row-reverse per avviare la direzione orizzontale dal lato opposto.

Flex item 1
Flex item 2
Flex item 3
Flex item 1
Flex item 2
Flex item 3

Codice 

<div class="d-flex flex-row mb-3 democ">
  <div class="demoe">Flex item 1</div>
  <div class="demoe">Flex item 2</div>
  <div class="demoe">Flex item 3</div>
</div>
<div class="d-flex flex-row-reverse democ">
  <div class="demoe">Flex item 1</div>
  <div class="demoe">Flex item 2</div>
  <div class="demoe">Flex item 3</div>
</div>

04. flex-column
Utilizzare .flex-column per impostare una direzione verticale o .flex-column-reverse per iniziare la direzione verticale dal lato opposto.

Flex item 1
Flex item 2
Flex item 3
Flex item 1
Flex item 2
Flex item 3

Codice 

<div class="d-flex flex-column mb-3 democ">
  <div class="demoe">Flex item 1</div>
  <div class="demoe">Flex item 2</div>
  <div class="demoe">Flex item 3</div>
</div>
<div class="d-flex flex-column-reverse mb-3 democ">
  <div class="demoe">Flex item 1</div>
  <div class="demoe">Flex item 2</div>
  <div class="demoe">Flex item 3</div>
</div>

05. justify-content
Utilizzare i programmi di utilità sui contenitori Flexbox: justify-content per modificare l'allineamento degli elementi flessibili sull'asse orizzontale: flex-direction: row o sulla'asse verticale: flex-direction: column
Scegliere tra start (impostazione predefinita del browser), end, center, between, o around.

Giustificato in orizzontale
Flex item 1
Flex item 2
Flex item 3
Flex item 1
Flex item 2
Flex item 3
Flex item 1
Flex item 2
Flex item 3
Flex item 1
Flex item 2
Flex item 3
Flex item 1
Flex item 2
Flex item 3

Giustificato in verticale
Flex item 1
Flex item 2
Flex item 3
Flex item 1
Flex item 2
Flex item 3
Flex item 1
Flex item 2
Flex item 3
Flex item 1
Flex item 2
Flex item 3
Flex item 1
Flex item 2
Flex item 3

Codice 

    <h5>Giustificato in orizzontale</h5>
<div class="d-flex justify-content-start mb-3 democ">
  <div class="demoe">Flex item 1</div>
  <div class="demoe">Flex item 2</div>
  <div class="demoe">Flex item 3</div>
</div>
<div class="d-flex justify-content-end mb-3 democ">
  <div class="demoe">Flex item 1</div>
  <div class="demoe">Flex item 2</div>
  <div class="demoe">Flex item 3</div>
</div>
<div class="d-flex justify-content-center mb-3 democ">
  <div class="demoe">Flex item 1</div>
  <div class="demoe">Flex item 2</div>
  <div class="demoe">Flex item 3</div>
</div>
<div class="d-flex justify-content-between mb-3 democ">
  <div class="demoe">Flex item 1</div>
  <div class="demoe">Flex item 2</div>
  <div class="demoe">Flex item 3</div>
</div>
<div class="d-flex justify-content-around mb-3 democ">
  <div class="demoe">Flex item 1</div>
  <div class="demoe">Flex item 2</div>
  <div class="demoe">Flex item 3</div>
</div>

        <h5>Giustificato in verticale</h5>
<div class="d-flex flex-column justify-content-start mb-3 democh">
  <div class="demoe">Flex item 1</div>
  <div class="demoe">Flex item 2</div>
  <div class="demoe">Flex item 3</div>
</div>
<div class="d-flex flex-column justify-content-end mb-3 democh">
  <div class="demoe">Flex item 1</div>
  <div class="demoe">Flex item 2</div>
  <div class="demoe">Flex item 3</div>
</div>
<div class="d-flex flex-column justify-content-center mb-3 democh">
  <div class="demoe">Flex item 1</div>
  <div class="demoe">Flex item 2</div>
  <div class="demoe">Flex item 3</div>
</div>
<div class="d-flex flex-column justify-content-between mb-3 democh">
  <div class="demoe">Flex item 1</div>
  <div class="demoe">Flex item 2</div>
  <div class="demoe">Flex item 3</div>
</div>
<div class="d-flex flex-column justify-content-around mb-3 democh">
  <div class="demoe">Flex item 1</div>
  <div class="demoe">Flex item 2</div>
  <div class="demoe">Flex item 3</div>
</div>

06. align-items
Utilizzare i programmi di utilità sui contenitori Flexbox: align-items per modificare l'allineamento degli elementi flessibili sull'asse orizzontale: flex-direction: row o sulla'asse verticale: flex-direction: column
Scegliere tra start (impostazione predefinita del browser), end, center, baseline, o stretch.

Allineato in orizzontale
Flex item 1
Flex item 2
Flex item 3
Flex item 1
Flex item 2
Flex item 3
Flex item 1
Flex item 2
Flex item 3
Flex item 1
Flex item 2
Flex item 3
Flex item 1
Flex item 2
Flex item 3

Allineato in verticale
Flex item 1
Flex item 2
Flex item 3
Flex item 1
Flex item 2
Flex item 3
Flex item 1
Flex item 2
Flex item 3
Flex item 1
Flex item 2
Flex item 3
Flex item 1
Flex item 2
Flex item 3

Codice 

    <h5>Allineato in orizzontale</h5>
<div class="d-flex align-items-start mb-3 democh">
  <div class="demoe">Flex item 1</div>
  <div class="demoe">Flex item 2</div>
  <div class="demoe">Flex item 3</div>
</div>
<div class="d-flex align-items-end mb-3 democh">
  <div class="demoe">Flex item 1</div>
  <div class="demoe">Flex item 2</div>
  <div class="demoe">Flex item 3</div>
</div>
<div class="d-flex align-items-center mb-3 democh">
  <div class="demoe">Flex item 1</div>
  <div class="demoe">Flex item 2</div>
  <div class="demoe">Flex item 3</div>
</div>
<div class="d-flex align-items-baseline mb-3 democh">
  <div class="demoe">Flex item 1</div>
  <div class="demoe">Flex item 2</div>
  <div class="demoe">Flex item 3</div>
</div>
<div class="d-flex align-items-strech mb-3 democh">
  <div class="demoe">Flex item 1</div>
  <div class="demoe">Flex item 2</div>
  <div class="demoe">Flex item 3</div>
</div>
    </section> 
      <br>
    <section>
        <h5>Allineato in verticale</h5>
<div class="d-flex flex-column align-items-start mb-3 democh">
  <div class="demoe">Flex item 1</div>
  <div class="demoe">Flex item 2</div>
  <div class="demoe">Flex item 3</div>
</div>
<div class="d-flex flex-column align-items-end mb-3 democh">
  <div class="demoe">Flex item 1</div>
  <div class="demoe">Flex item 2</div>
  <div class="demoe">Flex item 3</div>
</div>
<div class="d-flex flex-column align-items-center mb-3 democh">
  <div class="demoe">Flex item 1</div>
  <div class="demoe">Flex item 2</div>
  <div class="demoe">Flex item 3</div>
</div>
<div class="d-flex flex-column align-items-baseline mb-3 democh">
  <div class="demoe">Flex item 1</div>
  <div class="demoe">Flex item 2</div>
  <div class="demoe">Flex item 3</div>
</div>
<div class="d-flex flex-column align-items-strech mb-3 democh">
  <div class="demoe">Flex item 1</div>
  <div class="demoe">Flex item 2</div>
  <div class="demoe">Flex item 3</div>
</div>

07. align-self
align-self: permette di specificare l’allineamento di un singolo elemento rispetto al contenitore, sovrascrivendo il valore definito con align-items. I valori possibili sono gli stessi visti per align-items.

Flex item 1
Flex align-self-start 2
Flex item 3
Flex item 1
Flex align-self-end 2
Flex item 3
Flex item 1
Flex align-self-center 2
Flex item 3
Flex item 1
Flex align-self-baseline 2
Flex item 3
Flex item 1
Flex align-self-strech 2
Flex item 3

Codice 

<div class="d-flex mb-3 democh">
  <div class="demoe">Flex item 1</div>
  <div class="align-self-start demoe">Flex align-self-start 2</div>
  <div class="demoe">Flex item 3</div>
</div>
<div class="d-flex mb-3 democh">
  <div class="demoe">Flex item 1</div>
  <div class="align-self-end demoe">Flex align-self-end 2</div>
  <div class="demoe">Flex item 3</div>
</div>
<div class="d-flex mb-3 democh">
  <div class="demoe">Flex item 1</div>
  <div class="align-self-center demoe">Flex align-self-center 2</div>
  <div class="demoe">Flex item 3</div>
</div>
<div class="d-flex mb-3 democh">
  <div class="demoe">Flex item 1</div>
  <div class="align-self-baseline demoe">Flex align-self-baseline 2</div>
  <div class="demoe">Flex item 3</div>
</div>
<div class="d-flex mb-3 democh">
  <div class="demoe">Flex item 1</div>
  <div class="align-self-strech demoe">Flex align-self-strech 2</div>
  <div class="demoe">Flex item 3</div>
</div>

08. flex-fill
Usare la classe .flex-fill su una serie di elementi di pari livello per forzarli in larghezze uguali al loro contenuto
(o ampiezze uguali se il loro contenuto non supera la loro lunghezza predefinita) mentre occupa tutto lo spazio orizzontale disponibile.

Flex item: elemento con contenuto più lungo
Flex item
Flex item

Codice 

<div class="d-flex democ">
  <div class="flex-fill demoe">Flex item: elemento con contenuto più lungo</div>
  <div class="flex-fill demoe">Flex item</div>
  <div class="flex-fill demoe">Flex item</div>
</div>

09. flex-grow-*
Usare i programmi di utilità .flex-grow-* per cambiare la capacità di un oggetto flessibile di crescere per riempire lo spazio disponibile.
Nell'esempio seguente, l'elemento .flex-grow-1 utilizza tutto lo spazio disponibile che può, pur consentendo ai rimanenti due elementi flessibili il loro spazio necessario.

Flex item: flex-grow-1
Secondo elemento Flex
Quello che segue é il terzo elemento Flex

Codice 

<div class="d-flex democ">
  <div class="flex-grow-1 demoe">Flex item: flex-grow-1</div>
  <div class="demoe">Secondo elemento Flex</div>
  <div class="demoe">Quello che segue é il terzo elemento Flex</div>
</div>

10. flex-shrink-*
Usa i programmi di utilità .flex-shrink-* per cambiare la capacità di un oggetto flessibile di restringersi al massimo necessario.
Nell'esempio seguente, il secondo elemento flessibile con .flex-shrink-1 è costretto a restringere il suo contenuto in una senda riga, per consentire maggiore spazio al precedente elememto flessibile con .w-100.

Flex item
Flex item: flex-shrink-1

Codice 

<div class="d-flex democ">
  <div class="w-100 demoe">Flex item</div>
  <div class="flex-shrink-1 demoe">Flex item: flex-shrink-1</div>
</div>

11. Margini automatici
Flexbox può usare i margini automatici.
Di seguito sono mostrati tre esempi di controllo degli elementi flessibili tramite margini automatici:
1. predefinito (nessun margine automatico),
2. Spinge due elementi a destra .mr-auto.
3. Spinge due elementi a sinistra .ml-auto.

Flex item-1
Flex item-2
Flex item-3
Flex item-1: mr-auto
Flex item-2
Flex item-3
Flex item-1
Flex item-2
Flex item-3: ml-auto

Codice 

<div class="d-flex democ mb-3">
  <div class="demoe">Flex item-1</div>
  <div class="demoe">Flex item-2</div>
  <div class="demoe">Flex item-3</div>
</div>

<div class="d-flex democ mb-3">
  <div class="mr-auto demoe">Flex item-1: mr-auto</div>
  <div class="demoe">Flex item-2</div>
  <div class="demoe">Flex item-3</div>
</div>

<div class="d-flex democ mb-3">
  <div class="demoe">Flex item-1</div>
  <div class="demoe">Flex item-2</div>
  <div class="ml-auto demoe">Flex item-3: ml-auto</div>
</div>

12. Spostare
Spostare verticalmente un elemento flessibile nella parte superiore o inferiore di un contenitore con:
align-items, flex-direction:column e margin-top:auto o margin-bottom:auto.

Flex item-1: mb-auto
Flex item-2
Flex item-3
Flex item-1
Flex item-2
Flex item-3: mt-auto

Codice 

<div class="d-flex align-items-start flex-column democh mb-3">
  <div class="mb-auto demoe">Flex item-1: mb-auto</div>
  <div class="demoe">Flex item-2</div>
  <div class="demoe">Flex item-3</div>
</div>
<div class="d-flex align-items-end flex-column democh mb-3">
  <div class="demoe">Flex item-1</div>
  <div class="demoe">Flex item-2</div>
  <div class="mt-auto demoe">Flex item-3: mt-auto</div>
</div>

13. Avvolgimento: wrapping
Cambiare il modo in cui gli elementi flessibili si allineano in un contenitore flessibile avvolgendosi a capo, oppure no.
Scegliere nessun avvolgimento (predefinito del browser) con .flex-nowrap.
Oppure avvolto allineandosi a capo: .flex-wrapo o invertendo l'allineamento: .flex-wrap-reverse.

.flex-nowrap - Gli elementi del contenitore sono allineati in una riga e NON vanno a capo
Elemento flex-1
Elemento flex-2
Elemento flex-3
Elemento flex-4
Elemento flex-5
Elemento flex-6
Elemento flex-7
Elemento flex-8
Elemento flex-9
.flex-wrap - Gli elementi del contenitore vanno a capo e si allineano ordinatamente
Elemento flex-01
Elemento flex-02
Elemento flex-03
Elemento flex-04
Elemento flex-05
Elemento flex-06
Elemento flex-07
Elemento flex-08
Elemento flex-09
Elemento flex-10
Elemento flex-11
Elemento flex-12
Elemento flex-13
Elemento flex-14
Elemento flex-15
Elemento flex-16
Elemento flex-17
Elemento flex-18
Elemento flex-19
Elemento flex-20
Elemento flex-21
Elemento flex-22
Elemento flex-23
.flex-wrap-reverse - Gli elementi del contenitore vanno a capo e si allineano in senso inverso
Elemento flex-01
Elemento flex-02
Elemento flex-03
Elemento flex-04
Elemento flex-05
Elemento flex-06
Elemento flex-07
Elemento flex-08
Elemento flex-09
Elemento flex-10
Elemento flex-11
Elemento flex-12
Elemento flex-13
Elemento flex-14
Elemento flex-15
Elemento flex-16
Elemento flex-17
Elemento flex-18
Elemento flex-19
Elemento flex-20
Elemento flex-21
Elemento flex-22
Elemento flex-23

Codice 

<h5><code>.flex-nowrap</code> - Gli elementi del contenitore sono allineati in una riga e NON vanno a capo</h5>
      <div class="d-flex flex-nowrap democ mb-3">
        <div class="demoe">Elemento flex-1</div>
        <div class="demoe">Elemento flex-2</div>
        <div class="demoe">Elemento flex-3</div>
        <div class="demoe">Elemento flex-4</div>
        <div class="demoe">Elemento flex-5</div>
        <div class="demoe">Elemento flex-6</div>
        <div class="demoe">Elemento flex-7</div>
        <div class="demoe">Elemento flex-8</div>
        <div class="demoe">Elemento flex-9</div>

      </div>
      <h5><code>.flex-wrap</code> - Gli elementi del contenitore vanno a capo e si allineano ordinatamente</h5>
        <div class="d-flex flex-wrap democ mb-3">
        <div class="demoe">Elemento flex-01</div>
        <div class="demoe">Elemento flex-02</div>
        <div class="demoe">Elemento flex-03</div>
        <div class="demoe">Elemento flex-04</div>
        <div class="demoe">Elemento flex-05</div>
        <div class="demoe">Elemento flex-06</div>
        <div class="demoe">Elemento flex-07</div>
        <div class="demoe">Elemento flex-08</div>
        <div class="demoe">Elemento flex-09</div>
        <div class="demoe">Elemento flex-10</div>
        <div class="demoe">Elemento flex-11</div>
        <div class="demoe">Elemento flex-12</div>
        <div class="demoe">Elemento flex-13</div>
        <div class="demoe">Elemento flex-14</div>
        <div class="demoe">Elemento flex-15</div>
        <div class="demoe">Elemento flex-16</div>
        <div class="demoe">Elemento flex-17</div>
        <div class="demoe">Elemento flex-18</div>
        <div class="demoe">Elemento flex-19</div>
        <div class="demoe">Elemento flex-20</div>
        <div class="demoe">Elemento flex-21</div>
        <div class="demoe">Elemento flex-22</div>
        <div class="demoe">Elemento flex-23</div>
      </div>
      <h5><code>.flex-wrap-reverse</code> - Gli elementi del contenitore vanno a capo e si allineano in senso inverso</h5>
      <div class="d-flex flex-wrap-reverse democ mb-3">
        <div class="demoe">Elemento flex-01</div>
        <div class="demoe">Elemento flex-02</div>
        <div class="demoe">Elemento flex-03</div>
        <div class="demoe">Elemento flex-04</div>
        <div class="demoe">Elemento flex-05</div>
        <div class="demoe">Elemento flex-06</div>
        <div class="demoe">Elemento flex-07</div>
        <div class="demoe">Elemento flex-08</div>
        <div class="demoe">Elemento flex-09</div>
        <div class="demoe">Elemento flex-10</div>
        <div class="demoe">Elemento flex-11</div>
        <div class="demoe">Elemento flex-12</div>
        <div class="demoe">Elemento flex-13</div>
        <div class="demoe">Elemento flex-14</div>
        <div class="demoe">Elemento flex-15</div>
        <div class="demoe">Elemento flex-16</div>
        <div class="demoe">Elemento flex-17</div>
        <div class="demoe">Elemento flex-18</div>
        <div class="demoe">Elemento flex-19</div>
        <div class="demoe">Elemento flex-20</div>
        <div class="demoe">Elemento flex-21</div>
        <div class="demoe">Elemento flex-22</div>
        <div class="demoe">Elemento flex-23</div>
      </div>

14. Ordinamento
Cambiare l'ordine visivo di elementi flessibili specifici con le utilità .order-*.
Si forniscono le opzioni che vanno da: .order-1 a .order-12
Per gli altri elementi, aggiungere un CSS personalizzato per qualsiasi altro valore necessario.

flex item-1
flex item-2
flex item-3
flex item-4
flex item-5
flex item-6

Codice 

<div class="d-flex flex-nowrap democ">
  <div class="order-3 demoe">flex item-1</div>
  <div class="order-2 demoe">flex item-2</div>
  <div class="order-1 demoe">flex item-3</div>
  <div class="order-4 demoe">flex item-4</div>
  <div class="order-6 demoe">flex item-5</div>
  <div class="order-5 demoe">flex item-6</div>
</div>

15. align-content
Utilizzare l'utilità align-content sul contenitore Flexbox per allineare gli elementi flex insieme sull'asse trasversale.
Scegliere tra start(impostazione predefinita del browser), end, center, between, around, o stretch.
Per dimostrare queste utilità, abbiamo rafforzato flex-wrap: wrape aumentato il numero di articoli flessibili.

   .align-content-start
Elem. flex-01
Elem. flex-02
Elem. flex-03
Elem. flex-04
Elem. flex-05
Elem. flex-06
Elem. flex-07
Elem. flex-08
Elem. flex-09
Elem. flex-10
Elem. flex-11
Elem. flex-12
Elem. flex-13
Elem. flex-14
Elem. flex-15
Elem. flex-16
Elem. flex-17
Elem. flex-18
Elem. flex-19
Elem. flex-20
Elem. flex-21
   .align-content-end
Elem. flex-01
Elem. flex-02
Elem. flex-03
Elem. flex-04
Elem. flex-05
Elem. flex-06
Elem. flex-07
Elem. flex-08
Elem. flex-09
Elem. flex-10
Elem. flex-11
Elem. flex-12
Elem. flex-13
Elem. flex-14
Elem. flex-15
Elem. flex-16
Elem. flex-17
Elem. flex-18
Elem. flex-19
Elem. flex-20
Elem. flex-21
   .align-content-center
Elem. flex-01
Elem. flex-02
Elem. flex-03
Elem. flex-04
Elem. flex-05
Elem. flex-06
Elem. flex-07
Elem. flex-08
Elem. flex-09
Elem. flex-10
Elem. flex-11
Elem. flex-12
Elem. flex-13
Elem. flex-14
Elem. flex-15
Elem. flex-16
Elem. flex-17
Elem. flex-18
Elem. flex-19
Elem. flex-20
Elem. flex-21
   .align-content-between
Elem. flex-01
Elem. flex-02
Elem. flex-03
Elem. flex-04
Elem. flex-05
Elem. flex-06
Elem. flex-07
Elem. flex-08
Elem. flex-09
Elem. flex-10
Elem. flex-11
Elem. flex-12
Elem. flex-13
Elem. flex-14
Elem. flex-15
Elem. flex-16
Elem. flex-17
Elem. flex-18
Elem. flex-19
Elem. flex-20
Elem. flex-21
   .align-content-around
Elem. flex-01
Elem. flex-02
Elem. flex-03
Elem. flex-04
Elem. flex-05
Elem. flex-06
Elem. flex-07
Elem. flex-08
Elem. flex-09
Elem. flex-10
Elem. flex-11
Elem. flex-12
Elem. flex-13
Elem. flex-14
Elem. flex-15
Elem. flex-16
Elem. flex-17
Elem. flex-18
Elem. flex-19
Elem. flex-20
Elem. flex-21
   .align-content-stretch
Elem. flex-01
Elem. flex-02
Elem. flex-03
Elem. flex-04
Elem. flex-05
Elem. flex-06
Elem. flex-07
Elem. flex-08
Elem. flex-09
Elem. flex-10
Elem. flex-11
Elem. flex-12
Elem. flex-13
Elem. flex-14
Elem. flex-15
Elem. flex-16
Elem. flex-17
Elem. flex-18
Elem. flex-19
Elem. flex-20
Elem. flex-21

Codice 

    <h5>   .align-content-start</h5>
<div class="d-flex align-content-start flex-wrap democh">
  <div class="demoe">Elem. flex-01</div>
  <div class="demoe">Elem. flex-02</div>
  <div class="demoe">Elem. flex-03</div>
  <div class="demoe">Elem. flex-04</div>
  <div class="demoe">Elem. flex-05</div>
  <div class="demoe">Elem. flex-06</div>
  <div class="demoe">Elem. flex-07</div>
  <div class="demoe">Elem. flex-08</div>
  <div class="demoe">Elem. flex-09</div>
  <div class="demoe">Elem. flex-10</div>
  <div class="demoe">Elem. flex-11</div>
  <div class="demoe">Elem. flex-12</div>
  <div class="demoe">Elem. flex-13</div>
  <div class="demoe">Elem. flex-14</div>
  <div class="demoe">Elem. flex-15</div>
  <div class="demoe">Elem. flex-16</div>
  <div class="demoe">Elem. flex-17</div>
  <div class="demoe">Elem. flex-18</div>
  <div class="demoe">Elem. flex-19</div>
  <div class="demoe">Elem. flex-20</div>
  <div class="demoe">Elem. flex-21</div>
</div>
    <h5>   .align-content-end</h5>
<div class="d-flex align-content-end flex-wrap democh">
  <div class="demoe">Elem. flex-01</div>
  <div class="demoe">Elem. flex-02</div>
  <div class="demoe">Elem. flex-03</div>
  <div class="demoe">Elem. flex-04</div>
  <div class="demoe">Elem. flex-05</div>
  <div class="demoe">Elem. flex-06</div>
  <div class="demoe">Elem. flex-07</div>
  <div class="demoe">Elem. flex-08</div>
  <div class="demoe">Elem. flex-09</div>
  <div class="demoe">Elem. flex-10</div>
  <div class="demoe">Elem. flex-11</div>
  <div class="demoe">Elem. flex-12</div>
  <div class="demoe">Elem. flex-13</div>
  <div class="demoe">Elem. flex-14</div>
  <div class="demoe">Elem. flex-15</div>
  <div class="demoe">Elem. flex-16</div>
  <div class="demoe">Elem. flex-17</div>
  <div class="demoe">Elem. flex-18</div>
  <div class="demoe">Elem. flex-19</div>
  <div class="demoe">Elem. flex-20</div>
  <div class="demoe">Elem. flex-21</div>
</div>
    <h5>   .align-content-center</h5>
<div class="d-flex align-content-center flex-wrap democh">
  <div class="demoe">Elem. flex-01</div>
  <div class="demoe">Elem. flex-02</div>
  <div class="demoe">Elem. flex-03</div>
  <div class="demoe">Elem. flex-04</div>
  <div class="demoe">Elem. flex-05</div>
  <div class="demoe">Elem. flex-06</div>
  <div class="demoe">Elem. flex-07</div>
  <div class="demoe">Elem. flex-08</div>
  <div class="demoe">Elem. flex-09</div>
  <div class="demoe">Elem. flex-10</div>
  <div class="demoe">Elem. flex-11</div>
  <div class="demoe">Elem. flex-12</div>
  <div class="demoe">Elem. flex-13</div>
  <div class="demoe">Elem. flex-14</div>
  <div class="demoe">Elem. flex-15</div>
  <div class="demoe">Elem. flex-16</div>
  <div class="demoe">Elem. flex-17</div>
  <div class="demoe">Elem. flex-18</div>
  <div class="demoe">Elem. flex-19</div>
  <div class="demoe">Elem. flex-20</div>
  <div class="demoe">Elem. flex-21</div>
</div>
    <h5>   .align-content-between</h5>
<div class="d-flex align-content-between flex-wrap democh">
  <div class="demoe">Elem. flex-01</div>
  <div class="demoe">Elem. flex-02</div>
  <div class="demoe">Elem. flex-03</div>
  <div class="demoe">Elem. flex-04</div>
  <div class="demoe">Elem. flex-05</div>
  <div class="demoe">Elem. flex-06</div>
  <div class="demoe">Elem. flex-07</div>
  <div class="demoe">Elem. flex-08</div>
  <div class="demoe">Elem. flex-09</div>
  <div class="demoe">Elem. flex-10</div>
  <div class="demoe">Elem. flex-11</div>
  <div class="demoe">Elem. flex-12</div>
  <div class="demoe">Elem. flex-13</div>
  <div class="demoe">Elem. flex-14</div>
  <div class="demoe">Elem. flex-15</div>
  <div class="demoe">Elem. flex-16</div>
  <div class="demoe">Elem. flex-17</div>
  <div class="demoe">Elem. flex-18</div>
  <div class="demoe">Elem. flex-19</div>
  <div class="demoe">Elem. flex-20</div>
  <div class="demoe">Elem. flex-21</div>
</div>
    <h5>   .align-content-around</h5>
<div class="d-flex align-content-around flex-wrap democh">
  <div class="demoe">Elem. flex-01</div>
  <div class="demoe">Elem. flex-02</div>
  <div class="demoe">Elem. flex-03</div>
  <div class="demoe">Elem. flex-04</div>
  <div class="demoe">Elem. flex-05</div>
  <div class="demoe">Elem. flex-06</div>
  <div class="demoe">Elem. flex-07</div>
  <div class="demoe">Elem. flex-08</div>
  <div class="demoe">Elem. flex-09</div>
  <div class="demoe">Elem. flex-10</div>
  <div class="demoe">Elem. flex-11</div>
  <div class="demoe">Elem. flex-12</div>
  <div class="demoe">Elem. flex-13</div>
  <div class="demoe">Elem. flex-14</div>
  <div class="demoe">Elem. flex-15</div>
  <div class="demoe">Elem. flex-16</div>
  <div class="demoe">Elem. flex-17</div>
  <div class="demoe">Elem. flex-18</div>
  <div class="demoe">Elem. flex-19</div>
  <div class="demoe">Elem. flex-20</div>
  <div class="demoe">Elem. flex-21</div>
</div>
    <h5>   .align-content-stretch</h5>
<div class="d-flex align-content-stretch flex-wrap democh">
  <div class="demoe">Elem. flex-01</div>
  <div class="demoe">Elem. flex-02</div>
  <div class="demoe">Elem. flex-03</div>
  <div class="demoe">Elem. flex-04</div>
  <div class="demoe">Elem. flex-05</div>
  <div class="demoe">Elem. flex-06</div>
  <div class="demoe">Elem. flex-07</div>
  <div class="demoe">Elem. flex-08</div>
  <div class="demoe">Elem. flex-09</div>
  <div class="demoe">Elem. flex-10</div>
  <div class="demoe">Elem. flex-11</div>
  <div class="demoe">Elem. flex-12</div>
  <div class="demoe">Elem. flex-13</div>
  <div class="demoe">Elem. flex-14</div>
  <div class="demoe">Elem. flex-15</div>
  <div class="demoe">Elem. flex-16</div>
  <div class="demoe">Elem. flex-17</div>
  <div class="demoe">Elem. flex-18</div>
  <div class="demoe">Elem. flex-19</div>
  <div class="demoe">Elem. flex-20</div>
  <div class="demoe">Elem. flex-21</div>
</div>