Layout flessibili
Il CSS3 cio offre una novità importantissima per la creazione di layout flexbox; grazie a questa proprietà possiamo creare layout responsive.
I box presenti all’interno di un elemento contenitore possono essere disposti utilizzando vari metodi.
Iniziamo con il dichiarare il contenitore, che può essere body.
body { display: flex; } |
Ora possiamo definire il modo in cui verranno a posizionarsi gli elementi figli del nostro contenitore. Le proprietà sono:
- flex-direction – gli elementi figli possono essere disposti, in riga (row, row-reverse) o in colonna (column, column-reverse);
- flex-wrap – gli elementi figli possono essere disposti su una (nowrap) o più righe (wrap, wrap-reverse);
- flex-flow – gestire contemporaneamente flex-flow e flex-wrap;
- justify-content – permette di allineare gli elementi figli;
- center – allineamento orizzontale;
- flex-start – allineamento a sinistra;
- flex-end – allineamento a destra;
- flex-around – allineamento giustificato con spazi prima, dopo e tra gli elementi;
- flex-between – allineamento giustificato, con spazi tra gli elementi
- align-items – allineamento verticale:
- center – allineamento verticale;
- flex-start – allineamento superiore;
- flex-end – allineamento inferiore;
- stretch – gli elementi figli si adattano all’altezza del contenitore;
- baseline – gli elementi figli si allineano alla baseline del contenitore;
- align-content – allineamento delle varie linee nelle quali vengono distribuiti i vari box;
- center – le linee si allineano al centro dell’altezza del contenitore;
- flex-start – le linee si allineano al margine superiore del contenitore;
- flex-end – le linee si allineano al margine inferiore del contenitore;
- stretch – le linee si adattano all’altezza del contenitore per riempirla integralmente;
- space-between – le linee si dispongono omogeneamente nel contenitore mediante spazi prima, dopo e tra di esse;
- space-around – le linee si dispongono omogeneamente nel contenitore mediante spazi tra di esse;
I figli diretti di un elemento con display: flex diventano flessibili, le proprietà sono:
- order – definire l’ordine degli elementi;
- flex-grow – specificare la larghezza degli elementi gli uni rispetto agli altri;
- flex-shrink – definire quanto un elemento debba contrarsi rispetto agli altri;
- flex-basis – definire quella che sarà la larghezza iniziale;
- flex – possiamo impostare tutte le caratteristiche;
- align-self – allineare un elemento in modo indipendente rispetto ai criteri di ordinamento stabiliti per il contenitore;
La proprietà column-count ci permette di creare facilmente layout a colonne. Se ridimensioniamo la finestra le colonne vengono ridimensionate e il testo scorre automaticamente da una colonna all’altra.
- column-fill – forzare la calibrazione delle colonne;
- column-break-before – forzare una interruzione di colonna;
- coll-span – estendere un elemento su tutte le colonne,
- column-width – definire la larghezza della colonna e lasciare al browser il calcolo del numero di colonne che rientrano nel contenitore;
- column-gap – definire la larghezza dello spazio fra una colonna e l’altra;
Possiamo definire anche un “filetto” fra le colonne
- column-rule-color – definisce il colore;
- column-rule-width – definisce lo spessore (numerico o thin, medium, thick);
- column-rule-style – definisce lo stile;
- dotted – puntinato;
- dashed – tratteggiato;
- solid – linea continua;
- double – linea doppia;
- groove – 3d scanalato;
- ridge – 3d increspato;
- inset – sd incavato;
- outset – 3d aggettante;