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;

 

Please follow and like us:

Lascia un commento