Il modulo CSS3 Flexbox ha subito tre modifiche nel corso del tempo. La prima versione, del 2009, prevedeva la proprietà box; la seconda versione, del 2012, forniva la proprietà flexbox; finalmente, la terza versione, quella attualmente in fase di Candidate Recommendation, fornisce la proprietà flex.
Anche la libreria Compass dispone di un modulo Flexbox, e ne faremo uso per far evolvere la nostra griglia e renderla mantenibile ed estendibile senza alcuna difficoltà.
Ricostruiamo, quindi, la griglia presentata nelle pagine precedenti in puro stile SASS. Avviamo il terminale e collochiamoci nella directory myproject. Avviamo, poi, SASS e Compass:
$ compass watchApriamo il file grid.scss collocato nella cartella myproject/sass, e cominciamo con l'importare il modulo CSS3 di Compass:
@import "compass/css3";Impostiamo, quindi, le dimensioni del contenitore, dichiarando le prime variabili:
// Dimensions
$container-width: 60%;
// Colors
$bg-dark: #CCC;
$bg-light: #EEE;
$border-dark: #CCC;Scriviamo, poi, le dichiarazioni generali:
.flex-container,
.h-flex-container,
.v-flex-container,
.flex-cell {
@include box-sizing; // defaults to border-box
}
.flex-container,
.h-flex-container,
.v-flex-container {
background-color: $bg-dark;
width: $container-width;
margin: .4rem auto;
}
.flex-cell {
margin: 0;
background-color: $bg-light;
text-align: center;
min-width: 8rem;
border: 1px solid $border-dark;
}Abbiamo già messo in azione Compass, invocando il mixin box-sizing. Nei due blocchi successivi, abbiamo utilizzato le variabili definite più sopra. A questo punto ricorriamo al modulo del Flexbox:
.flex-container,
.h-flex-container,
.v-flex-container {
@include display-flex;
@include flex-wrap(wrap);
margin: 0;
padding: 0;
}
.flex-container,
.h-flex-container {
@include flex-direction(row);
}
.v-flex-container {
@include flex-direction(column);
}Abbiamo utilizzato i mixin display-flex, flex-wrap e flex-direction.
Il passo successivo è la dichiarazione degli stili dei singoli elementi della griglia:
/* flexbox cells */
/*
* flex-grow: 0;
* flex-shrink: 0;
* flex-basis: auto;
*/
.flex-none {
@include flex(none);
}
/*
* flex-grow: 1;
* flex-shrink: 1;
* flex-basis: auto;
*/
.flex-auto {
@include flex(auto);
}
/*
* automatically fits to element's content
* flex-basis: content;
*/
.flex-content {
@include flex(content);
}Giusto per dare un'occhiata a cosa sta succedendo, salviamo il file grid.scss e apriamo il file grid.css. Se non abbiamo commesso errori, il listato ottenuto sarà un foglio di stile perfettamente x-browser.
Link utili