CSS FlexBox Container

Come chiarito nel precedente articolo gli elementi che compongono un layout flexbox sono un contenitore ed i rispettivi figli. In questo articolo analizzeremo quelle che sono le regole del CSS flexbox container.

Flexbox axis

Assi del contenitore principale

Per scrivere questo post mi sono aiutato con questo giochetto on-line basato sul flexbox, che riporto assieme alle spiegazioni per rendere l’idea: http://flexboxfroggy.com/#it.
Questi livelli di flexboxfroggy agiscono quasi tutti ad eccezione di uno solo se non erro sul contenitore, quindi i figli hanno tutti la proprietà flex: 1; che illustreremo nel prossimo articolo.

1)display:flex, affinchè il tuo contenitore aderisca a questo standard occorre abbia questa proprietà CSS.

2)flex-direction, questa proprietà’ definisce la direzione in cui gli elementi verranno posizionati nel contenitore e accetta i seguenti valori:

  • row: Elementi posizionati nella stessa direzione del testo sulla stessa riga.
  • row-reverse: Gli elementi sono posizionati nella direzione opposta al testo, sempre sulla stessa riga.
  • column: Gli elementi sono posizionati dall’alto verso il basso, quindi disposti su più “colonne”.
  • column-reverse: Gli elementi sono posizionati dal basso verso l’alto, sempre supponendo che sia disposti su più “colonne”.
flex-direction example

Esempio flex direction – CSS FlexBox Container

3)justify-content, allinea gli elementi sull’asse principale (main axis in figura), esso può assumere i seguenti valori:

  • flex-start: Allinea i box dentro questo contenitore a sinistra.
  • flex-end: Allinea i box dentro questo contenitore a destra.
  • center: Allinea i box dentro questo contenitore al centro.
  • space-between: Separa gli elementi con uguale spazio tra di loro.
  • space-around: Separa gli elementi con uguale spazio attorno ad essi.
justify-content example

Esempio Justify Content – CSS FlexBox Container

4)align-items, al contrario si occupa della disposizione degli elementi sull’asse verticale, esso può assumere i seguenti valori:

  • flex-start: Allinea i box in alto al contenitore.
  • flex-end: Allinea i box in basso al contenitore.
  • center: Allinea i box al centro del contenitore.
  • baseline: Dispone gli elementi in modo tale che le loro baselines siano allineate.
  • stretch: I box flessibili sono allungati per occupare tutto il contenitore.

align-items fix

Problema da risolvere con align-items


Impostando align-items:flex-end; i box ossia le rane vengono spinte verticalmente in fondo al div che le contiene.
align-item fix

Align Items agisce sull’asse verticale

5)flex-wrap, specifica se i box all’interno del contenitore si dispongono su una riga o su più righe in base allo spazio disponibile, esso può assumere i seguenti valori:

  • nowrap: I box sono disposti sulla stessa riga non andranno mai a capo a costo di essere strectchati o stretti.
  • wrap: Gli elementi vengono sistemati su piu’ righe se non ci stanno in una sola.
  • wrap-reverse: I box vengono disposti su piu’ linee in ordine inverso.

flex-wrap CSS Flexbox Container

Flex Wrap problema elementi su un unica riga


Con flex wrap gli elementi possono essere disposti su più righe o su un unica riga, qui come vediamo necessitano che prendano lo spazio che meritano pertanto li sposteremo su più righe con flex-wrap:wrap;
Flex wrap fix issue CSS Flexbox Container

Flex Wrap: wrap dipone box su più righe

6)align-content, gestisce l’allineamento di una riga di box flessibili lungo l’asse verticale; ha effetto solo su contenitori multi-riga e può assumere i seguenti valori:

  • flex-start: I box sono raggruppati all’inizio della riga.
  • flex-end: I box sono raggruppati alla fine della riga.
  • center: I box sono centrati vericalmente al contenitore.
  • space-between: I box vengono disposti su più righe con spazio tra loro equidistante.
  • space-around: Lo spazio equidistante incide sull’altezza.
  • space-around: I box vengono strectchati per occupare tutta l’altezza disponibile.

Allign-Content a differenza di justify-content agisce sull’asse verticale, quindi supponendo di avere questa situazione lascio a voi capire quale regola occorre inserire per fixare questo problema 🙂

Align Content CSS FlexBox Container

Align Content agisce sull’asse verticale

7)flex-flow, combina in un unica proprietà flex-direction e flex-wrap, esempio flex-flow:column nowrap.

Vi rimando ora all’articolo su box figli prima di addentrarci in problematiche legate alle immagini nel flexbox.

Oltre ad invitarvi a divertire con flexbox froggy 🙂 Ecco l’ultimo livello risolto 😉 Complimentoni al creatore @Codepip 😉

Flexbox Froggy

Risoluzione Ultimo Livello Flexbox Froggy

CSS FlexBox Container ultima modidfica: 2017-11-20T21:53:10+01:00 da Gianluca Di Vincenzo