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!
html css flexbox flex layout attribute
Commentami!