显示类型被未知来源覆盖答案

【问题标题】：Display types are overridden by unknown source显示类型被未知来源覆盖
【发布时间】：2019-02-27 07:02:48
【问题描述】：

我有一个包含三个元素的容器：一个图像和两个 div：

我希望所有图像都是内联块，并在它们的类中指定：

 .first_image {
        display: inline-block;
        height: 20px;
        width: 20px;
 }
 .first_div {
        width: 100%;
        display: inline-block;
 }
 .second_div {
        width: 52px !important;
        height: 40px !important;
        display: inline-block;
        background-color: #3798D4;
 }
 .container {
        display: inline-flex;
 }

但是，当我运行和检查时，这些是实际的属性：

容器（类 case-input 是 .container）

第一张图片

第一个div

最后一个 div（这个有 .edit_pen_container 类并包含一个按钮）

问题是 1. 显示为 flex，尽管它应该是 inline-flex，2.、3. 和 4. 显示为 block，尽管它们应该是 inline-block。我真的不明白为什么它会改变。此外，该属性没有被划掉，所以它似乎没有被覆盖。

顺便说一下，你可以理解我的逻辑，img 会留在那里，div 1 的宽度为 100%，因为它必须占据 div 的其余部分。当用户将鼠标放在 div 1 中时，会出现 div 2 并将采用固定宽度 (52px) 并且 div 1 将缩小以允许 div 2 占据它需要的空间。也许我的逻辑是错误的，但这就是我想要做的。

所有 HTML 元素都是通过 javascript 添加的，所以我没有要显示的 DOM 层次结构。

【问题讨论】：

你有一个我们可以查看的有效 URL 吗？
@Gerard 目前仅在本地服务器上。我决定暂时将所有元素切换为阻止并使用不同的方法。

标签： html css flexbox

【解决方案1】：

Stack Overflow 上已经对 flex 和 inline-flex 之间的区别进行了很好的讨论。 It is an important read 并将在此讨论中提供帮助。

基本上，inline-flex 表示容器将是内联的，而flex 表示容器将是块级的。这是关键，在这两种情况下，the children are flex-items. 它们将以某种方式运行，并具有某些默认值以适应 flex 模型。在某些方面，您必须为它们设置不同于常规块或内联元素的样式。

请参阅下面的 sn-p 示例。

.first_image {
   display: inline-block;
   height: 20px;
   width: 20px;
}
.first_div {
   width: 100%;
   display: inline-block;
}

.first_div_expanding {
  flex: 1;
}
.second_div {
   width: 52px !important;
   height: 40px !important;
   display: inline-block;
   background-color: #3798D4;
}
.container {
    display: inline-flex;
}
.flex-container {
    display: flex;
}

.set-sized-flex-container {
    display: inline-flex;
    width: 75%;
}

<h1>Inline-flex</h1>
<p>The flex container only takes up as much space as it needs and will not force a new line.</p>
<div class='container'>
  <img src="https://via.placeholder.com/20x20" class="first-image">
  <div class="first_div">No expansion</div>
  <div class="second_div"></div>
</div>
<hr>
<h1>Flex</h1>
<p>The flex container will take the full-width of the screen</p>
<div class='flex-container'>
  <img src="https://via.placeholder.com/20x20" class="first-image">
  <div class="first_div">I expand full-width</div>
  <div class="second_div"></div>
</div>
<hr>
<h1>Expanding first_div with Inline-Flex</h1>
<div class='set-sized-flex-container'>
  <img src="https://via.placeholder.com/20x20" class="first-image">
  <div class="first_div_expanding">I expand to take up remaining space</div>
  <div class="second_div"></div>
</div>

【讨论】：

这个答案主要涵盖了flex 和inline-flex 之间的区别，正如您所指出的，已经在另一篇文章中介绍过。但是，更重要的是，它没有解决本文中的问题。
感谢您的回复更加清晰。我更关注实用性，而你更关注深度和理解。我很欣赏你的方法。

【解决方案2】：

你写道：

问题是 1. 显示为 flex 尽管它应该是 inline-flex，2.、3. 和 4. 显示为 block 虽然它们应该是 inline-block... ，该属性没有被划掉，所以它似乎没有被覆盖。

所以让我们澄清一下：

元素 #1 (.container) 是一个弹性容器。您是说问题在于您声明了display: inline-flex，但浏览器将元素呈现为display: flex。
元素#2、#3 和#4 是#1 的流入子元素。这意味着它们是弹性项目。您是说问题在于您已将这些项目设置为display: inline-block，但浏览器将它们呈现为display: block。

好的。让我们一一讨论这两点。

为什么display: inline-flex 计算到display: flex？

因为这是 flexbox 规范所要求的。

§ 3. Flex Containers: the flex and inline-flex display values

如果一个元素的指定display是inline-flex，那么它的 display 属性在某些情况下计算为 flex： CSS 2.1 Section 9.7 中的表被修改为包含一个附加行，inline-flex 在“指定值”列和“计算值”列中的flex。

所以inline-flex 在某些情况下计算为flex，如上面摘录中链接到的表格中所述。这就是您的代码中发生的事情。从技术上讲，它不是覆盖，这就是为什么您没有看到 inline-flex 被划掉的原因。

为什么display: inline-block 在弹性项目上计算为display: block？

再一次，因为这是 flexbox 规范所要求的。

§ 4. Flex Items

弹性项目的display 值被阻塞：如果生成弹性容器的元素的流入子元素的指定display 是内联级值，则它计算为其块级等效值。

另外请注意，您无法控制弹性项目的display 值。一旦你让一个元素成为一个弹性容器，弹性项目上的display 属性就由弹性算法控制。浏览器会忽略在弹性项目上设置display 规则的尝试。这就是您在代码中看到的内容：display: inline-block 被忽略（但同样，技术上没有被覆盖，这就是为什么 inline-block 没有被划掉）。

【讨论】：