I am vertically and horizontally centered.
/* Container for flexboxes */
.riga-flex {
display: flex;
flex-wrap: wrap;
}
/* On screens that are 600px wide or less, make the columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
.riga-flex {
flex-direction: column;
}
}
/* Due colonne uguali */
.col-flex-2-50 {
flex: 50%;
padding: 20px;
}
/* Due colonne diverse 40% e 60%*/
.col-flex-2-40 {
flex: 40%;
padding: 20px;
}
.col-flex-2-60 {
flex: 60%;
padding: 20px;
}
/* Due colonne diverse 30% e 70%*/
.col-flex-2-30 {
flex: 33%;
padding: 20px;
}
.col-flex-2-70 {
flex: 67%;
padding: 20px;
}
/* Due colonne diverse 80% e 20%*/
.col-flex-2-80 {
flex: 75%;
padding: 20px;
}
.col-flex-2-20 {
flex: 25%;
padding: 20px;
}
/* On screens that are 992px wide or less, go from 2 columns to 1 column */
@media screen and (max-width: 992px) {
.col-flex-2-50, .col-flex-2-40, .col-flex-2-60, .col-flex-2-20, .col-flex-2-80 {
width: 100%;
}
}
/* Tre colonne uguali */
.col-flex-3 {
flex: 33.333%;
padding: 20px;
}
/* On screens that are 992px wide or less, go from n columns to two columns */
@media screen and (max-width: 992px) {
.col-flex-3 {
flex: 50%;
}
}
/* Quattro colonne uguali */
.col-flex-4 {
flex: 25%;
padding: 20px;
}
@media screen and (max-width: 992px) {
.col-flex-4 {
flex: 50%;
}
}
/* Cinque colonne uguali */
.col-flex-5 {
flex: 20%;
padding: 20px;
}
@media screen and (max-width: 992px) {
.col-flex-5 {
flex: 50%;
}
}
/* Sei colonne uguali */
.col-flex-6 {
flex: 16.666%;
padding: 10px;
}
@media screen and (max-width: 992px) {
.col-flex-6 {
flex: 50%;
}
}
/* Esempio d'uso: