Categorie
Css

Flex box

Start
Il modo migliore di gestire le Flex Box è organizzarle creando un #wrapper che contiene “enne” #box
Per fare dei test-> http://codepen.io/unil3o/pen/BEcvh

inserire la proprietà display:flex nel #wrapper

Le Proprietà

Flex

Evita che la #box si adatti al contenuto deformandosi
Parametro assegnato alle #box che permette di regolare lo spazio loro destinato 

flex:1 1 100px; -> [n n px = grow shrink basis]

  • flex-grow: definisce la quantità di spazio che un elemento andrà ad occupare all’interno del contenitore. Se ad esempio ogni elemento ha impostato un flex-grow pari ad 1, tutti avranno la stessa dimensione tale da occupare l’intero elemento padre.
  • flex-shrink: Questo definisce la capacità di un elemento nel ridurne la flessibilità, se necessario.
  • flex-basis: agisce come la proprietà width, è una sorta di “larghezza preferita” in cui gli elementi sono flessibili secondo tale valore.

Order
Parametro che determina l’ordine dei #box all’interno del #wrapper

Flex Direction

 

  • flex-direction:column;
  • flex-direction:row;

 

Alineamento

Del Box

align-self:flex-end;

  • flex-start: allinea tutti gli elementi in alto
  • flex-end: allinea tutti gli elementi in basso
  • baseline: allinea tutti i box in relazione alla prima linea di contenuto
  • stretch: rende l’altezza degli elementi figli pari a quella dell’alemento padre.

Del Contenuto

align-items:stretch;
justify-content:center;

  • flex-start: allinea tutti gli elementi a sinistra
  • flex-end: allinea tutti gli elementi a destra
  • center: allinea tutti gli elementi al centro
  • space-around: colloca una quantità di spazio uguale su entrambi i lati dell’elemento
  • space-beetween: distribuisce gli elementi in maniera tale da collocare il primo e l’ultimo ai margini del contenitore e i restanti suddivisi al centro.

 

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *

Questo sito usa Akismet per ridurre lo spam. Scopri come i tuoi dati vengono elaborati.