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;