Sei sulla pagina 1di 27

02 maggio - 08 maggio

Dom 02 Lun 03 Mar 04 Mer 05 Gio 06 Ven 07 Sab 08


Introduzione Layout con Live Coding Programmare VueJS Chiamate Progetto e
a HTML e CSS CSS Flexbox Layout in JavaScript API con Axios final show

Cosa facciamo oggi?


Layout con CSS Flexbox
Impareremo una nuova proprietà di CSS (display:
flex) che ci permetterà di posizionare gli elementi
dove vogliamo nella pagina, creando dei veri
layout.

#BooleanCodingWeek
PRONTI?
SI PARTE!
Flexbox
Flexbox - per gli amici Flex -
è una tecnologia introdotta con l’ultima release CSS
(CSS3) che ci permette di creare layout complessi (o
parti di essi) con poche e semplici regole.

Tab Atkins, inventore di Flex dice:

“My goal in doing Flexbox and later Grid was to replace


all the crazy float/table/inline-block/etc hacks that I’d
had to master as a webdev. All that crap was (a) stupid,
(b) hard to remember, and (c) limited in a million
annoying ways, so I wanted to make a few well-done
layout modules that solved the same problems in simple,
easy-to-use, and complete ways.”

#BooleanCodingWeek
Cosa fa Flex?
Il CSS3 FlexBox, è una modalità di layout che prevede la
disposizione degli elementi in una pagina in modo
«flessibile».
Abbiamo quindi finalmente uno strumento
appositamente studiato per lavorare in modo diretto e
più dichiarativo sugli elementi della pagina, con anche la
possibilità di adattare più facilmente a schermi e
dispositivi diversi.

Gli elementi che vogliamo siano disposti in modo


flessibile devono essere contenuti in un genitore «Flex»,
detto «Flex-Container» che ne modificherà il
comportamento naturale.

#BooleanCodingWeek
LIVE CODING
Flex-Container
L’elemento che conterrà tutti gli elementi flessibili, viene
definito: flex container.

Potremmo assegnare alcune proprietà al flex container


che andranno a modificare il posizionamento degli
elementi figli.

Queste regole avranno effetto solo sui figli diretti del


container

#BooleanCodingWeek
Flex direction
Con flex direction possiamo dichiarare come vogliamo
che siano disposti gli elementi.

- row - in linea - Default


- column - in colonna
- row-reverse - in linea da destra verso sinistra
- column-reverse - in colonna dal basso verso l’alto

Questa regola è molto importante perché influirà su


tutte le successive

#BooleanCodingWeek
Flex direction

#BooleanCodingWeek
LIVE CODING
Asse principale
Prima di continuare è importante fare una veloce
precisazione riguardo all’asse principale.

L’asse principale, definito da flex-direction, è l’asse


portante del nostro contenitore flex.

Se flex direction sarà impostato su row (il default), l’asse


principale sarà quello orizzontale delle X, se invece fosse
column, su quello verticale delle Y

#BooleanCodingWeek
Flex-basis
Flex-basis definisce la dimensione base dei nostri
elementi. É il modo migliore per capire quanto
flex-direction influisca su tutte le altre regole.

Se flex-direction è row o row-reverse, flex-basis sarà la


width del nostro elemento, altrimenti sarà la height del
nostro elemento.

Attenzione:
Definisce solo la dimensione base...

#BooleanCodingWeek
LIVE CODING
Justify content
Justify content definirà come saranno disposti gli elementi sull’asse principale
(Non sarà quindi sempre l’asse orizzontale, ma varierà in base a flex
direction).

- flex-start - posizionati all’inizio dell’asse - default


- flex-end - posizionati alla fine dell’asse
- center - centrati sull’asse
- space-between - distribuiti in modo uniforme con il primo e ultimo
elemento contro il bordo del contenitore
- space-around - distribuiti in modo uniforme con il primo e ultimo
elemento staccati dal contenitore
- space-evenly - distribuiti in modo uniforme sia tra elementi che rispetto
al contenitore

#BooleanCodingWeek
Justify content

#BooleanCodingWeek
Align items
Align items definirà come saranno disposti gli elementi sull’asse secondario:

- stretch - Tutti gli elementi avranno stessa grandezza - default


- flex-start - posizionati all’inizio dell’asse
- flex-end - posizionati alla fine dell’asse
- center - centrati sull’asse
- baseline - gli oggetti sono disposti sulla linea di base (a seconda del
contenuto).

#BooleanCodingWeek
Align items

#BooleanCodingWeek
LIVE CODING
Altre regole
Di seguito altre importanti regole, ma non tutte, ce ne sono ancora diverse in
flex, per i casi più ostici

- flex-wrap - Da assegnare al flex-container per decidere se posizionare


gli elementi su più linee, colonne
- flex-grow - Da assegnare al flex-item per decidere se potrà o meno
ingrandirsi
- flex-shrink - Da assegnare al flex-item per decidere se potrà o meno
rimpicciolirsi
- order - Per decidere l’ordinamento degli elementi figli (flex-item)

#BooleanCodingWeek
Flex-wrap

#BooleanCodingWeek
Flex-grow

#BooleanCodingWeek
Order

#BooleanCodingWeek
LIVE CODING
Dom 02 Lun 03 Mar 04 Mer 05 Gio 06 Ven 07 Sab 08
Introduzione Layout con Live Coding Programmare VueJS Chiamate Progetto e
a HTML e CSS CSS Flexbox Layout in JavaScript API con Axios final show

Cosa abbiamo fatto oggi?


Layout con CSS Flexbox
Abbiamo imparato una nuova proprietà di CSS
(display: flex) che ci permette di posizionare gli
elementi dove vogliamo nella pagina, creando dei
veri layout.
Impareremo una nuova proprietà di CSS (display:
flex) che ci permetterà di posizionare gli elementi
dove vogliamo nella pagina, creando dei veri
layout.

#BooleanCodingWeek
Dom 02 Lun 03 Mar 04 Mer 05 Gio 06 Ven 07 Sab 08
Introduzione Layout con Live Coding Programmare VueJS Chiamate Progetto e
a HTML e CSS CSS Flexbox Layout in JavaScript API con Axios final show

Cosa faremo domani?


Live Coding Layout
Creeremo attraverso tutte le regole imparate in
questi due giorni un layout completo partendo da
zero.

#BooleanCodingWeek
Registrazioni delle lezioni
Tutte le lezioni e le slide vengono registrate e
caricate su:

https://booleancodingweek.teachable.com

entro la mattina del giorno successivo

#BooleanCodingWeek