TP2 : Mise en page avec CSS et Flex box

Nous disposons des blocs suivants dans (Layout.html)

<div id="container">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
</div>
1.
Donnez à chacune des 6 cases et au conteneur le
plus à l'extérieur une bordure noire solide de 2
points.
Chaque boîte doit mesurer 80 pixels de
large/hauteur.
Le conteneur de boîtes le plus à l'extérieur
doit avoir un fond gris et avoir une largeur de
50 % de la page.
Les cases paires doivent avoir un fond vert
foncé - les cases impaires doivent avoir un fond
gris.
La taille de la police des nombres doit être de
20 pt.
2. Faites en sorte que le conteneur gris ait un
rayon de bordure de 5 pixels sur tous les côtés
avec un espacement de 10 pixels séparant ses
bordures supérieure/inférieure des bordures des
boîtes intérieures.

Faites en sorte que le texte soit centré

horizontalement dans chaque case.
3. L’objectif est de transformer cette page boite
layout1.html comme suit (ligne au lieu d’une
colonne) :
 4. Centrez le conteneur de boîte sur la page et
modifiez la largeur à 75%.
5. Comment pourrions-nous répartir uniformément les
boîtes dans les conteneurs de boîtes (espace égal
entre chaque boîte)?
6. Faites que les boîtes se rapprochent lorsque le
conteneur de boîtes devient trop petit dans le
navigateur et qu'elles conservent leur largeur carrée
(que se passe-t-il lorsque vous réduisez la largeur du
navigateur dans l'exercice précédent?).

Flex avancé :
1. Disposez les boîtes en deux colonnes de 3 boîtes en
utilisant flex . Remarque: ne vous fiez pas trop aux
 solutions CSS précédentes - vous devrez également
modifier légèrement le code HTML pour regrouper
les colonnes)

Dans le code HTML, créez des boîtes groupées en deux colonnes de 3

cases (indice: ajoutez une classe aux deux groupements appelée
"colonne").

Changez la hauteur de #container à 500px et centrez les colonnes

verticalement

Distribuez les deux colonnes à gauche/ à la fin du #container.

N.B : La couleur va changer.