59 lines
No EOL
1 KiB
CSS
Executable file
59 lines
No EOL
1 KiB
CSS
Executable file
/* Système de grille utilisant les flexbox */
|
|
|
|
.row {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
justify-content: center;
|
|
}
|
|
|
|
.row-xs {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
justify-content: space-between;
|
|
width: 80%;
|
|
margin: auto;
|
|
}
|
|
|
|
.col {
|
|
flex: 1;
|
|
margin: 10px;
|
|
}
|
|
|
|
/* classes pour les largeurs des colonnes */
|
|
|
|
.col-1 { flex: 0 0 8.33%; }
|
|
.col-2 { flex: 0 0 16.667%; }
|
|
.col-3 { flex: 0 0 25%; }
|
|
.col-4 { flex: 0 0 33.33%; }
|
|
.col-5 { flex: 0 0 46.66%; }
|
|
.col-6 { flex: 0 0 50%; }
|
|
.col-7 { flex: 0 0 58.33%; }
|
|
.col-8 { flex: 0 0 66.66%; }
|
|
.col-9 { flex: 0 0 75%; }
|
|
.col-10 { flex: 0 0 83.33%; }
|
|
.col-11 { flex: 0 0 91.66%; }
|
|
.col-12 { flex: 0 0 100%; }
|
|
|
|
/* Responsive */
|
|
|
|
@media screen and (max-width: 768px) {
|
|
.row {
|
|
flex-direction: column;
|
|
}
|
|
|
|
.col {
|
|
margin: 10px 0;
|
|
}
|
|
|
|
.menu ul.guestbook li span.date {
|
|
color: #646788;
|
|
}
|
|
|
|
.col-2 {
|
|
order: 2; /* Placer après .col-7 */
|
|
}
|
|
|
|
.col-7 {
|
|
order: 1; /* Placer avant .col-1 */
|
|
}
|
|
} |