好吧，無論元素的預設值如何，您都可以透過設定來更改此屬性：

display: block
display: inline-block

現在在您的程式碼筆中，更改 .box 規則集以使所有框並排顯示。

彈性盒和網格

對於內部顯示類型，我們還有更多關於如何放置事物的選項。我們可以將元素變成彈性盒或網格，這將影響其子元素的佈局。

顯示： 柔性

這些概念中的每一個都值得單獨寫一篇文章，但基本上，彈性框將「靈活地」定位內聯父元素中包含的元素。 Flexbox 更能適應不同的螢幕尺寸，因為它相對於彼此以及包含元素而不是相對於視窗放置項目。

要查看實際效果，請查看 Codepen 中的 .frame 規則集。

取消註解以下程式碼行：

display: flex;

它看起來與四個內聯塊非常相似，對吧？預設情況下，Flex 容器將其項目對齊到 Flexbox 的開頭或左側，但是，這也可以更改！

在彈性盒的聲明下方，加入以下內容：

justify-content: center;

現在我們應該看到所有的框框都出現在螢幕中間！

但是，如果我們不希望他們像那樣被困在頂部怎麼辦？我們也加入：

align-items: center;

偉大的！

顯示：網格

注意：在 CodePen 中繼續操作之前，請確保註解掉或刪除包含 display: flex 以及您新增的 justify-content 或align-items 屬性的行。

除了彈性盒之外，我們還可以選擇將整個元素變成網格，我們可以在其中放置項目！

我不會在這裡詳細介紹此程式碼的細節，但知道可以透過將元素聲明為網格、提供網格模板然後將項目放入網格中來實現！

取消.frame規則集中以下行的註解！

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

現在，您應該看到每個框都位於框架象限的中心！

使用你新發現的技能！

與上一篇文章一樣，這裡有一系列挑戰。 在嘗試之前，您需要刪除或重新註釋建立網格佈局的程式碼行！

挑戰#1： 在 MDN 中搜尋正確的 justify-content 屬性，以便在水平面上均勻地顯示每個區塊，而不接觸側面和垂直中心，如下圖所示。

挑戰#2：仍然在彈性容器中，看看您是否可以將所有盒子組合在一起並將它們放在右下角！ （您必須為此調整哪些屬性？）

挑戰 #3： 你能找到一個可以反轉元素顯示順序的 flex 屬性嗎？

恭喜您完成這些挑戰！下週見，了解更多 HTML 和 CSS！