Eh bien, quelles que soient les valeurs par défaut de l'élément, vous pouvez modifier cette propriété en définissant :

display: block
display: inline-block

Maintenant, dans votre stylo de code, modifiez le jeu de règles .box pour que toutes les cases apparaissent côte à côte.

Flexbox et grille

En ce qui concerne les types d'affichage intérieur, nous proposons quelques options supplémentaires sur la façon de positionner les éléments. Nous pouvons transformer notre élément en flexbox ou en grille, ce qui affectera la disposition de ses enfants.

Affichage : Flex

Chacun de ces concepts mérite un article entier, mais fondamentalement, une boîte flexible positionnera de manière « flexible » les éléments contenus dans un élément parent en ligne. La flexbox s'adapte mieux aux différentes tailles d'écran car elle place les éléments les uns par rapport aux autres et à l'élément contenant plutôt que par rapport à la fenêtre.

Pour voir cela en action, jetez un œil à l'ensemble de règles .frame dans le Codepen.

Décommentez la ligne de code suivante :

display: flex;

Cela ressemble beaucoup à avoir quatre blocs en ligne, n'est-ce pas ? Par défaut, un conteneur flexible justifie ses éléments au début de la flexbox, ou à gauche, mais cela peut également être modifié !

Sous la déclaration de la flexbox, ajoutez ceci :

justify-content: center;

Et maintenant nous devrions voir toutes les cases apparaître au milieu de l'écran !

Mais, et si nous ne voulons pas qu'ils soient coincés au sommet comme ça ? Ajoutons également :

align-items: center;

Super!

Affichage : Grille

Remarque : avant de continuer dans le CodePen, assurez-vous de commenter ou de supprimer les lignes contenant display: flex et les propriétés justifier-content ou align-items que vous avez ajoutées.

En plus de la flexbox, nous avons également la possibilité de transformer l'intégralité de notre élément en une grille, où nous pouvons placer des éléments !

Je n'entrerai pas beaucoup dans les détails de ce code ici, mais sachez que c'est possible en déclarant l'élément comme étant une grille, en fournissant un modèle de grille, puis en plaçant les éléments dans la grille !

Décommentez les lignes suivantes dans l'ensemble de règles .frame !

display: grid;  
  grid-template: 1fr 1fr / 1fr 1fr;
  align-items: center;
  justify-items: center;

Maintenant, vous devriez voir chacune des cases positionnées chacune au centre d'un quadrant du cadre !

Utilisez vos nouvelles compétences !

Comme pour le dernier article, voici une série de défis. Vous souhaiterez supprimer ou re-commenter les lignes de code créant la disposition de la grille avant de tenter !

Défi n°1 : Recherchez dans MDN la propriété de justification-contenu correcte pour afficher chacun des blocs uniformément sur le plan horizontal sans toucher les côtés et au centre verticalement, comme illustré ci-dessous.

Défi n°2 : Toujours dans un conteneur flexible, voyez si vous pouvez regrouper toutes les cases et les placer dans le coin inférieur droit ! (Quelles propriétés devrez-vous ajuster pour cela ?)

Défi n°3 : Pouvez-vous trouver une propriété flex qui inversera l'ordre d'affichage des éléments ?

Félicitations pour avoir relevé ces défis ! Rendez-vous la semaine prochaine pour plus de HTML et CSS !