CSS Flexbox Childs

Dopo aver analizzato nell’articolo precedente i comportamenti sul contenitore di un display flex andiamo a concludere la panoramica sul layout flex analizzando i CSS Flexbox Childs, ossia le proprietà che possiamo assegnare ai figli/items di un singolo contenitore.

Per essere più chiari ripartiamo dalla mock-up descritta nel primo articolo dove il contenitore ha la proprietà display:flex.

Mockup realizzata con layout flexbox

Mockup di partenza



Andiamo a vedere quali possono essere le proprietà sui nodi figli.

1)order, consente di customizzare l’ordine degli elementi figli indipendentemente dalla loro posizione nel DOM.
Di default ha valore 0, come nella mockup, però l’utente potrebbe desiderare che il testo appaia sopra all’immagine, con il flexbox impostando semplicemente order:-1; sul div che contiene “Lorem ipsum” esso andrà sopra l’immagine ottenendo questo risultato, oppure volere l’immagine dopo il bottone basta assegnare order:3 al contenitore dell’immagine.

order CSS Flexbox Childs

Esempio order:-1


Esempio property order

Esempio order:3, immagine dopo il bottone

2)flex‐grow, definisce la possibilità di un elemento figlio di crescere se ha spazio disponibile, ciò non è altro che un fattore di ingrandimento.

.item {
  flex-grow: <number>; /* default 0 */
}

3)flex-shrink, definisce la possibilità di un elemento di decrescere, ossia fattore di restringimento.

.item {
  flex-shrink: <number>; /* default 1 */
}

4)flex-basis, definisce la dimensione predefinita di un elemento prima che lo spazio rimanente sia distribuito.

.item {
  flex-basis: <length> | auto; /* default auto */
}

Può essere una lunghezza (es. 20%, 5rem, ecc.) o una parola chiave come auto che sta ad indicare di attenersi alla with o height dell’elemento DOM.
Se impostato su 0, lo spazio extra attorno al contenuto non viene preso in considerazione. Se impostato su auto, lo spazio extra viene distribuito in base al valore della proprietà flex-grow, differenza resa più intuitiva dall’immagine qui sotto riportata.

flex basis space distribution

Differnza tra flex-basis:0 e flex-basis:auto

5)flex, permette di riepilogare in un unica proprietà le sopra citate flex-grow, flex-shrink e flex-basis.

.item {
  flex: none | [ <'flex-grow'> <'flex-shrink'> <'flex-basis'> ]
}

5)align-self, che assomiglia molto alle proprietà studiate nel precedente articolo per il contenitore, però agisce a livello di singolo componente escludendolo dal normale flusso sull’asse verticale, mentre sul contenitore le proprietà sotto riepilogate agivano su tutti i box figli.

  • flex-start: Allinea il singolo box in alto.
  • flex-end: Allinea il singolo box in fondo.
  • center: Allinea il singolo box al centro.
  • baseline: Allinea il singolo alla baseline del testo.
  • stretch: Stretcha/allunga l’elemento affinchè copra tutta la height del contenitore padre.
.item {
  align-self: auto | flex-start | flex-end | center | baseline | stretch;
}

CSS Flexbox Childs ultima modidfica: 2017-11-20T21:47:43+01:00 da Gianluca Di Vincenzo
Posted in: CSS

By on 20 Novembre 2017

Tagged: , , , , , , ,