为什么 (display: flex) 表现得像继承的 属性？

Question

我有一个关于显示的问题 属性。那么，为什么我们可以为div设置{display: flex}，并且这个值会赋予所有p，属于div的。这让我想到 {display: flex} 是继承的 属性。我对吗？ 但我不明白。同样的东西没有效果，当我们为div建立{display:inline}时。因为这个属性只为p设立。请解释一下。

<div>
  <p>1</p>
  <p>2</p>
  <p>3</p>
</div>

CSS:

div {
  display: inline;
}

这是我的代码： https://codepen.io/Eva255/pen/OJMNpBe

Answer 1

因此，您注意到 display:flex 将项目从一行更改为一列。为什么？

display:flex 告诉浏览器您希望 div 中的项目使用 flexbox 布局进行排列。

flexbox 布局专为希望 flexible boxes 在单行或单列上，均匀分布的开发人员设计.因此，当您给 div 一个 display:flex 时，它会将 div 的 p 排列在一行中，而不是默认列中。

就是这样。 p 本身没有任何变化。

更多阅读给你：https://css-tricks.com/snippets/css/a-guide-to-flexbox/（点击背景部分，不要幸灾乐祸，我知道它们很漂亮）

希望对您有所帮助！