Sintesi della lezione

Layout FLEX

Proprietà per il flex-container

#display

Per definire un elemento come contenitore di un layout di tipo flex bisogna settare la sua prorpietà displaycome flex o inline-flex. Tu i sui discendenti diretti (children) saranno trattati come elementi flex.

.container {
  display: flex; /* or inline-flex */
}

#flex-direction


Definisce l'asse principale, definendo così la direzione secondo la quale gli elementi flex vengono inseriti nel contenitore: righe (orizzontalmente) o colonne (verticalalmente) e in quale verso.

.container {
  flex-direction: row | row-reverse | column | column-reverse;
}
  • row(impostazione predefinita): da sinistra a destra in ltr ; da destra a sinistra inrtl
  • row-reverse: da destra a sinistra in ltr ; da sinistra a destra inrtl
  • column: come row ma dall'alto in basso
  • column-reverse: come row-reverse ma basso verso l'alto

#flex-wrap

Per impostazione predefinita, gli elemnti flex verranno collocati su un'unica linea. Si può consentire gli elementi eseguire il wrapping (andare a capo) se manca lo spazio.

.container{
  flex-wrap: nowrap | wrap | wrap-reverse;
}
  • nowrap(impostazione predefinita): tutti gli elementi flex saranno su una sola riga
  • wrap: se manca spazio gli elementi flex si disposrranno su più righe, dall'alto in basso.
  • wrap-reverse: se manca spazio gli elementi flex si disposrranno su più righe, dal basso all'alto.

#flex-flow

Si tratta di una forma abbreviata per settare le propriettà flex-direction e flex-wrap  insieme. Il valore predefinito è row nowrap .

.contaner {
    flex-flow: <‘flex-direction’> || <‘flex-wrap’>
}

#justify-content


Definisce l'allineamento lungo l'asse principale. Aiuta a distribuire lo spazio extra gratis lasciato quando entrambi tutti gli elementi di flessione su una riga sono inflessibili, o sono flessibili ma hanno raggiunto la loro dimensione massima. Esercita anche un certo controllo sull'allineamento degli elementi quando essi overflow la linea.

.container {
  justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly;
}
  • flex-start(impostazione predefinita): se flex-direction è row gli elementi sono accostati l'uno all'atro a sinistra 
  • flex-end: se flex-direction è row gli elementi sono accostati l'uno all'atro a destra
  • center: gli elementi sono accostati l'uno all'atro al centro
  • space-between: gli elementi sono distribuiti uniformemente; se flex-direction è row  il primo elemento è accostato a sinistra a, l'ultimo a destra.
  • space-around: gli elementi sono distribuiti uniformemente con uguale spazio intorno a loro. Si noti che visivamente gli spazi non sono uguali, poiché tutti gli elementi hanno uguale spazio su entrambi i lati. Il primo elemento avrà una sola unità di spazio dal bordo del contenitore, ma due unità di spazio dall'elemento successivo.
  • space-evenly: gli elementi sono distribuiti in modo che la distanza tra gli elementi e la distanza dai bordi sia uguale.

#align-items


Questo definisce il comportamento predefinito per come flex, gli elementi vengono disposti lungo l'asse trasversale sulla riga corrente. Pensate a come il justify-content versione per l'asse trasversale (perpendicolare all'asse della conduttura).

.container {
  align-items: flex-start | flex-end | center | baseline | stretch;
}
  • flex-start: bordo di croce-inizio margine degli elementi è posto sulla linea di croce-partenza
  • flex-end: bordo di croce-fine margine degli elementi è posto sulla croce-fine linea
  • center: gli elementi sono centrati nell'asse trasversale
  • baseline: gli elementi sono allineati come allineare le loro linee di base
  • stretch(impostazione predefinita): tratto per riempire il contenitore (ancora rispetto min-Larghezza/max-width)

#align-content


Questo allinea le linee di un contenitore di flex all'interno quando c'è spazio extra nell'asse trasversale, simile a come justify-content Allinea i singoli elementi all'interno dell'asse principale.

Nota: questa proprietà non ha effetto quando c'è solo una linea di elementi di flex.

.container {
  align-content: flex-start | flex-end | center | space-between | space-around | stretch;
}
  • flex-start: pranzo di linee all'inizio del contenitore
  • flex-end: pranzo di linee alla fine del contenitore
  • center: linee pranzo al centro del contenitore
  • space-between: linee distribuite in modo uniforme; la prima riga è all'inizio del contenitore mentre l'ultimo è alla fine
  • space-around: linee distribuite in modo uniforme con uguale spazio intorno ogni riga
  • stretch(impostazione predefinita): linee tratto per occupare lo spazio rimanente

Proprietà per i flex-item

order


Per impostazione predefinita gli elementi flex vengono disposti nell'ordine in cui appaiono del codice HTML. La proprietà order modifica questo comportamento.

.item {
  order: <integer>; /* default is 0 */
}

flex-grow


Definisce il tasso di crescita di un elemento flex rispetta agli altri nell'occupazione dell spazio disponibile nel contenitore. Accetta un valore intero o decimale che funziona come una percentuale. 

Se tutti gli elementi hanno flex-grow impostato su 1, lo spazio disponibile nel contenitore sarà equamente distribuito tra tutti gli elementi. Se uno degli elementi ha flex-grow impostato a 2, occuperà (se lo spazio disponibile lo consente) il doppio dello spazio occupato dagli altri.

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

I numeri negativi non sono validi.

flex-shrink

Funzione come flex-grow ma definisce il tasso di riduzione dello spazio occupato.

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

I numeri negativi non sono validi.

flex-basis

Definisce la dimensione predefinita di un elemento prima che lo spazio disponibile nel contenitore venga distribuito. Può essere una misura (ad esempio 20%, 5rem, ecc.) o la parola chiave auto.

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

Se impostata su auto , lo spazio disponibile viene distribuito basato al valore di flex-grow.

flex #

Consente di impostare in un unica soluzione le proprietà flex-grow, flex-shrink e flex-basis. Il secondo e il terzo parametro ( flex-shrink e flex-basis ) sono facoltativi. Valore predefinito è 0 1 auto .

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

Si consiglia di utilizzare questa proprietà a sintassi abbreviata anziché impostare le singole proprietà. I browser elaborano meglio l'istruzione e correggono automaticamente eventuali incongruenze..

align-self


Consente di modificare l'impostazione  definita da align-items  per singoli elementi flex.

I valori utilizzabili sono gli stessi di align-items

.item {
  align-self: auto | flex-start | flex-end | center | baseline | stretch;
}

Si noti che float , clear e vertical-align non hanno alcun effetto su un elemento di flex.