Continuiamo a parlare dei flexbox nei css ed in particolare delle proprietà dei box-flessibili.
Nella precedente lezione abbiamo elencato alcune proprietà del box contenitore genitore, allego quindi il link: introduzione a flexbox, per permettere un facile ripasso.
Flexbox CSS proprietà dei box-flessibili
Le proprietà che si applicano ai box flessibili sono dunque:
flex-grow: proprietà che consente di impostare il fattore di ingrandimento di un box rispetto agli altri. Ammette un valore numerico. Se tutti gli elementi hanno ad esempio flex-grow uguale a 1, lo spazio libero verrà suddiviso equamente fra tutti gli elementi. Se invece un elemento ha la proprietà flex-grow uguale a 2 allora riceverà il doppio dello spazio rispetto agli altri elementi.
flex-shrink: funziona allo stesso modo di flex-grow ma impostando il fattore di riduzione. Anche questa proprietà ammette dei valori numerici. In particolare se un elemento ha la proprietà flex-shrink impostata a 2 allora verrà ridotto il doppio rispetto a quello con flex-shrink uguale a 1.
flex-basis: permette di impostare le dimensioni di un box. Si possono indicare valori in percentuale, un valore numerico oppure la parola chiave auto. Il valore auto è quello di default e divide in percentuale lo spazio tra i vari elementi sulla base della proprietà flex-grow.
flex: questa proprietà è un modo compatto per indicare in un’unica regola i valori per flex-grow, flex-shrink e flex-basis.
order: indica l’ordine in cui viene mostrato un box contenitore rispetto agli altri definiti nello stesso contenitore padre.
align-self: permette di specificare per un singolo box l’allineamento sull’asse perpendicolare. Consente di inserire i seguenti valori: flex-start, flex-end, center, baseline, auto e stretch.
In questa lezione abbiamo semplicemente elencato le proprietà dei box flessibili, nella prossima lezione approfondiremo ciascuna proprietà attraverso degli esempi pratici.
Alcuni link utili
Fogli di stile interni, esterni ed in linea
Come impostare le pseudo-classi