Nun, unabhängig von den Standardeinstellungen für das Element können Sie diese Eigenschaft ändern, indem Sie Folgendes festlegen:

display: block
display: inline-block

Ändern Sie nun in Ihrem Codestift den .box-Regelsatz, damit alle Boxen nebeneinander angezeigt werden.

Flexbox und Grid

Was die inneren Anzeigetypen betrifft, haben wir noch ein paar weitere Optionen zur Positionierung der Dinge. Wir können unser Element in eine Flexbox oder ein Raster umwandeln, was sich auf die Anordnung seiner untergeordneten Elemente auswirkt.

Anzeige: Flex

Jedes dieser Konzepte verdient einen eigenen Beitrag, aber im Grunde positioniert eine Flex-Box Elemente, die in einem übergeordneten Element enthalten sind, „flexibel“ inline. Die Flexbox passt sich besser an unterschiedliche Bildschirmgrößen an, da sie Elemente relativ zueinander und zum enthaltenden Element und nicht relativ zum Fenster platziert.

Um dies in Aktion zu sehen, werfen Sie einen Blick auf den .frame-Regelsatz im Codepen.

Entkommentieren Sie die folgende Codezeile:

display: flex;

Es sieht sehr ähnlich aus, als hätte man vier Inline-Blöcke, oder? Standardmäßig richtet ein Flex-Container seine Elemente am Anfang der Flexbox oder links aus, aber dies kann auch geändert werden!

Fügen Sie unter der Deklaration der Flexbox Folgendes hinzu:

justify-content: center;

Und jetzt sollten alle Kästchen in der Mitte des Bildschirms erscheinen!

Aber was ist, wenn wir nicht wollen, dass sie so oben stecken bleiben? Fügen wir außerdem hinzu:

align-items: center;

Großartig!

Anzeige: Raster

Hinweis: Bevor Sie mit dem CodePen fortfahren, stellen Sie sicher, dass Sie die Zeilen auskommentieren oder entfernen, die display: flex und die von Ihnen hinzugefügten Eigenschaften „justify-content“ oder „align-items“ enthalten.

Zusätzlich zur Flexbox haben wir auch die Möglichkeit, unser gesamtes Element in ein Raster zu verwandeln, in dem wir Gegenstände platzieren können!

Ich werde hier nicht viel auf die Details dieses Codes eingehen, aber ich weiß, dass es möglich ist, indem man das Element als Raster deklariert, eine Rastervorlage bereitstellt und dann Elemente innerhalb des Rasters platziert!

Kommentieren Sie die folgenden Zeilen im .frame-Regelsatz aus!

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

Jetzt sollten Sie sehen, dass jedes der Kästchen jeweils in der Mitte eines Quadranten des Rahmens positioniert ist!

Nutzen Sie Ihre neu gewonnenen Fähigkeiten!

Wie im letzten Artikel gibt es auch hier eine Reihe von Herausforderungen. Sie sollten die Codezeilen, die das Rasterlayout erstellen, löschen oder erneut kommentieren, bevor Sie es versuchen!

Herausforderung Nr. 1: Durchsuchen Sie MDN nach der richtigen justify-content-Eigenschaft, um jeden der Blöcke gleichmäßig auf der horizontalen Ebene anzuzeigen, ohne die Seiten zu berühren, und in der Mitte vertikal, wie unten abgebildet.

Herausforderung Nr. 2: Versuchen Sie, alle Boxen in einem flexiblen Container zu gruppieren und in der unteren rechten Ecke zu platzieren! (Welche Eigenschaften müssen Sie dafür anpassen?)

Herausforderung Nr. 3: Können Sie eine Flex-Eigenschaft finden, die die Anzeigereihenfolge der Elemente umkehrt?

Herzlichen Glückwunsch zum Abschluss dieser Herausforderungen! Bis nächste Woche für mehr HTML und CSS!