好吧，无论元素的默认值如何，您都可以通过设置来更改此属性：

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！