Les conteneurs de même taille avec flex-grow.
Voici la solution idéale pour le wrapping, car vous n’avez jamais besoin d’utiliser des px, c’est le même sur bureau, tablette et mobile, et vous pouvez même changer l’écart entre les éléments de 20 à 30px. Vos conteneurs d’arrière-plan doivent être en mode « boxed ». Valeurs utilisées : 1120 pour ultra large et bureau, 80% pour ordinateur portable, tablette extra, tablette, mobile extra, puis mobile à 90%. Assurez-vous d’ajouter les points de rupture responsives supplémentaires, sinon cela ne marchera pas comme dans mon exemple.
- 13,5%
- 25%
- 35%
1
2
3
4
5
6
7
8
9
10
11
- 16.5%
- 25%
- 35%
1
2
3
4
5
6
7
8
9
- 20%
- 35%
- 100%
1
2
3
4
5
6
7
- 25%
- 35%
- 100%
1
2
3
4
5
- 35%
- 100%
- 100%
1
2
3
Les conteneurs de tailles différentes avec flex-grow.
C’est une solution fonctionnelle pour les designs à 12 colonnes (dans la grille 1140/1120) où les conteneurs ont des largeurs différentes. De plus, sur tablette et mobile, j’ai mis tout à 100%, mais vous pouvez bien sûr ajuster cela selon votre design.
- 13,5%
- 25%
- 35%
1
2
3
4
5
6
7
8
9
10
11
- 16.5%
- 25%
- 35%
1
2
3
4
5
6
7
8
9
- 20%
- 35%
- 100%
1
2
3
4
5
6
7
- 25%
- 35%
- 100%
1
2
3
4
5
- 35%
- 100%
- 100%