In questo foglio di stile per prima cosa è stato definito il container. L’istruzione “display: flex;” rende possibile il flexbox.
Gli elementi sono distribuiti da sinistra a destra, perché non è stata indicata una disposizione diversa. Tuttavia, esistono 5 diverse possibilità che possono essere impostate con l'istruzione “justify-content”:
- flex-start: allineato a sinistra
- flex-end: allineato a destra
- center: centrato
- space-around: spazio intorno ai box distribuito in modo uniforme
- space-between: spazio tra i box distribuito in modo uniforme
Il resto del codice è di natura puramente formale e non ha nulla a che fare con i flexbox reali.
Il CSS presuppone un’organizzazione orizzontale in Flexbox, ma una disposizione degli elementi in colonna è ugualmente possibile. Inoltre, si può invertire la direzione, cioè da sinistra a destra o dal basso verso l’alto. A tal fine si utilizza l’istruzione “flex-direction”:
- row: da sinistra a destra
- row-reverse: da destra a sinistra
- column:: dall’alto al basso
- column-reverse: dal basso all’alto
Il comando “justify-content: flex-end;” non è lo stesso di “flex-direction: row-reverse;”: mentre nel primo caso si posiziona l’ultimo elemento all’estrema destra, nel secondo caso si modifica l’ordine completo. Il primo elemento del codice apparirebbe quindi all’estrema destra.