Usare CSS flexbox con Flex Layout Attribute

Mattepuffo's logo
Usare CSS flexbox con Flex Layout Attribute

Usare CSS flexbox con Flex Layout Attribute

Flexbox è un nuovo tipo di layout da usare con CSS3.

In pratica permette di creare dei layout "flessibili" e facilmente responsive in breve tempo.

Da quanto ho capito, anche Twitter Bootsrap 4 lo userà come base per il suo nuovo layout system.

Per usarlo in maniera più semplice, esiste un helper HTML: Flex Layout Attribute!

In pratica è un semplice foglio di stile.

Poi nell' HTML useremo dei componenti custom, che verranno richiamati dal CSS.

Non c'è Javascript!

Vediamo un esempio:

<!DOCTYPE html>
<html>
    <head>
        <title>FLA</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link href="flex-layout-attribute.min.css" rel="stylesheet">
        <style>
            body {
                height: 100%;
                background: #212121;
            }

            main {
                margin: 3rem;
            }

            section {
                min-height: 80vh;
                border: solid;
            }

            div {
                padding: 1rem 1.5rem;
                width: auto;
                background-color: rgba(0, 176, 255,0.5);
                color: rgba(255, 255, 255, 0.9);
                outline: 1px dotted #212121;
                font: bold 1em monospace;
            }
            
            div div {
                background-color: rgba(0, 176, 255,1);
            }

        </style>
    </head>
    <body>
        <main>
            <section layout="column">
                <!-- A -->
                <div layout="rows-justify">
                    <div self="size-1of3 md-half sm-full">A1</div>
                    <div self="size-1of3 md-half sm-full">A2</div>
                </div>
                <!-- B -->
                <div layout="lg-column" self="size-x1">
                    <div self="size-x1">B1</div>
                    <div self="size-x3 sm-first">
                        B2 (first on small screen)
                    </div>
                    <div self="size-x1">B3</div>
                </div>
                <!-- C -->
                <div layout="rows-justify">
                    <div self="sm-full">C1</div>
                    <div self="right sm-full">C2</div>
                    <div self="sm-full">C3</div>
                </div>
            </section>
        </main>
    </body>
</html>

Abbiamo tre righe:

  • nella prima abbiamo due riquadri ai lati del div principale
  • nella seconda abbiamo tre colonne, di cui quella centrale diventa la prima sui dispositivi mobile
  • nella terza abbiamo tre riquadri, uno a sinistra e due a destra

Avviate la pagina su browser a tutto schermo, e poi provate a ridimensionare la finestra.

Come potete vedere, i componenti si risistemeranno per la visualizzazione mobile.

Ovviamente, sarebbe possibile ottenere lo stesso effetto anche senza questo helper; ma lo trovo abbastanza comodo.

Enjoy!


Condividi

Commentami!